pb-sxp-ui 1.18.2 → 1.19.0-alpha.1

package/lib/core/context/SxpDataSourceProvider.js

@@ -53,6 +53,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     const [chatlabsId, setChatlabsId] = (0, react_1.useState)();
     const finalPageData = (0, react_1.useMemo)(() => pageData !== null && pageData !== void 0 ? pageData : data, [pageData, data]);
     const pixelPvStatusRef = (0, react_1.useRef)(false);
+    const fbcRef = (0, react_1.useRef)('');
     const isShowConsent = (0, react_1.useMemo)(() => {
         var _a, _b, _c, _d;
         return (((((_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.privacy_necessity) && !isAgreePolicy && !isEditor) || isOpenConsent) &&
@@ -108,6 +109,53 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         var _a;
         return ((_a = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _a === void 0 ? void 0 : _a['x-app-id']) + (0, localStore_1.storeAndLoadFeUserId)();
     }, [bffDataSource]);
+    (0, react_1.useEffect)(() => {
+        if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting))
+            return;
+        fbcRef.current = (0, tool_1.getCookie)('_fbc');
+        window.OptanonWrapper = function () {
+            const activeGroups = window === null || window === void 0 ? void 0 : window.OnetrustActiveGroups;
+            if (!activeGroups)
+                return;
+            if (!(activeGroups === null || activeGroups === void 0 ? void 0 : activeGroups.includes('4'))) {
+                (0, tool_1.deleteCookie)('_fbc');
+            }
+            else if (fbcRef.current) {
+                (0, tool_1.setCookie)('_fbc', fbcRef.current, 90);
+            }
+        };
+    }, [globalConfig]);
+    const isActiveTargetingCookie = (0, react_1.useMemo)(() => {
+        var _a;
+        function isTargetingRejected(cookieValue) {
+            const groupsMatch = cookieValue.match(/groups=([^&]+)/);
+            if (!groupsMatch || !groupsMatch[1]) {
+                return false;
+            }
+            const groupsString = groupsMatch[1];
+            const groupsPairs = groupsString.split(',');
+            for (const pair of groupsPairs) {
+                const [category, status] = pair.split(':');
+                if (category === '4') {
+                    return status === '0';
+                }
+            }
+            return false;
+        }
+        function getCookie(name) {
+            var _a;
+            const value = `; ${document.cookie}`;
+            const parts = value.split(`; ${name}=`);
+            if (parts.length === 2)
+                return (_a = parts.pop()) === null || _a === void 0 ? void 0 : _a.split(';').shift();
+            return '';
+        }
+        const OptanonConsent = decodeURIComponent((_a = getCookie('OptanonConsent')) !== null && _a !== void 0 ? _a : '');
+        if (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (window === null || window === void 0 ? void 0 : window.OnetrustActiveGroups) && !(window === null || window === void 0 ? void 0 : window.OnetrustActiveGroups.includes('4')))) {
+            return true;
+        }
+        return false;
+    }, [globalConfig]);
     const bffFetch = (0, react_1.useCallback)((path, options, isBota = true) => {
         var _a;
         if (!bffDataSource)
@@ -135,6 +183,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     }, [bffDataSource, fakeUserId]);
     const bffCollectEvent = (0, react_1.useCallback)((params) => {
         var _a;
+        if (isActiveTargetingCookie)
+            return Promise.resolve();
         const body = {
             eventName: params === null || params === void 0 ? void 0 : params.eventName,
             eventSource: params === null || params === void 0 ? void 0 : params.eventSource
@@ -144,34 +194,35 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             body,
             type: 'beacon'
         }, false);
-    }, [bffFetch, bffDataSource]);
+    }, [bffFetch, bffDataSource, isActiveTargetingCookie]);
     (0, react_1.useEffect)(() => {
-        if (typeof (window === null || window === void 0 ? void 0 : window.fbq) === 'function') {
-            const OriginalImage = window.Image;
-            window.Image = function () {
-                const img = new OriginalImage();
-                const originalSrcDescriptor = Object.getOwnPropertyDescriptor(HTMLImageElement.prototype, 'src');
-                Object.defineProperty(img, 'src', {
-                    set(value) {
-                        originalSrcDescriptor.set.call(this, value);
-                        if (value.includes('https://www.facebook.com/privacy_sandbox/pixel/register/trigger/')) {
-                            const url = new URL(value);
-                            const params = Object.fromEntries(url.searchParams.entries());
-                            bffCollectEvent({
-                                eventName: params === null || params === void 0 ? void 0 : params.ev,
-                                eventSource: 'Meta Pixel'
-                            });
-                        }
-                        ;
-                    },
-                    get() {
-                        return originalSrcDescriptor.get.call(this);
+        const OriginalImage = window.Image;
+        window.Image = function () {
+            const img = new OriginalImage();
+            const originalSrcDescriptor = Object.getOwnPropertyDescriptor(HTMLImageElement.prototype, 'src');
+            Object.defineProperty(img, 'src', {
+                set(value) {
+                    if (isActiveTargetingCookie && (value.includes('https://www.facebook.com/privacy_sandbox/pixel/register/trigger/') || value.includes('https://www.facebook.com/tr'))) {
+                        return;
                     }
-                });
-                return img;
-            };
-        }
-    }, [bffCollectEvent]);
+                    originalSrcDescriptor.set.call(this, value);
+                    if (value.includes('https://www.facebook.com/privacy_sandbox/pixel/register/trigger/')) {
+                        const url = new URL(value);
+                        const params = Object.fromEntries(url.searchParams.entries());
+                        bffCollectEvent({
+                            eventName: params === null || params === void 0 ? void 0 : params.ev,
+                            eventSource: 'Meta Pixel'
+                        });
+                    }
+                    ;
+                },
+                get() {
+                    return originalSrcDescriptor.get.call(this);
+                }
+            });
+            return img;
+        };
+    }, [bffCollectEvent, isActiveTargetingCookie]);
     (0, react_1.useEffect)(() => {
         const navigatorWithBeacon = navigator;
         if (!navigatorWithBeacon.sendBeacon) {
@@ -181,6 +232,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         const originalSendBeacon = navigatorWithBeacon.sendBeacon.bind(navigatorWithBeacon);
         navigatorWithBeacon.sendBeacon = function (url, data) {
             const urlString = url instanceof URL ? url.href : url.toString();
+            if (isActiveTargetingCookie && (urlString.includes('https://tr.snapchat.com/p') || urlString.includes('https://analytics.tiktok.com/api/v2/pixel'))) {
+                return true;
+            }
             const success = originalSendBeacon(url, data);
             function parseBeaconData(data) {
                 return tslib_1.__awaiter(this, void 0, void 0, function* () {
@@ -226,7 +280,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         return () => {
             navigatorWithBeacon.sendBeacon = originalSendBeacon;
         };
-    }, [bffCollectEvent]);
+    }, [bffCollectEvent, isActiveTargetingCookie]);
     (0, react_1.useEffect)(() => {
         const _originalFetch = window.fetch;
         window.fetch = function (input, init) {
@@ -246,6 +300,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
                     return _originalFetch.apply(this, arguments_1);
                 }
                 try {
+                    if (isActiveTargetingCookie && (url.includes('https://www.google-analytics.com/g/collect') || url.includes('https://arms-retcode.aliyuncs.com/r.png'))) {
+                        return Promise.resolve(new Response(''));
+                    }
                     const response = _originalFetch.apply(this, arguments_1);
                     if (url.includes('https://www.google-analytics.com/g/collect')) {
                         const urlObj = new URL(url);
@@ -287,7 +344,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
                 }
             });
         };
-    }, [bffCollectEvent]);
+    }, [bffCollectEvent, isActiveTargetingCookie]);
     (0, react_1.useEffect)(() => {
         const originalOpen = XMLHttpRequest.prototype.open;
         const originalSend = XMLHttpRequest.prototype.send;
@@ -297,6 +354,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         };
         XMLHttpRequest.prototype.send = function (body) {
             var _a;
+            if (isActiveTargetingCookie && this._url && typeof this._url === 'string' && (this._url.includes('https://rumcollector.uptime.com') || this._url.includes('https://arms-retcode.aliyuncs.com/r.png') || this._url.includes('https://i.giesswein.com/nb-collector'))) {
+                return;
+            }
             if (this._url && typeof this._url === 'string' && this._url.includes('https://i.giesswein.com/nb-collector')) {
                 if (body && typeof body === 'string') {
                     try {
@@ -322,7 +382,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             XMLHttpRequest.prototype.open = originalOpen;
             XMLHttpRequest.prototype.send = originalSend;
         };
-    }, [bffCollectEvent]);
+    }, [bffCollectEvent, isActiveTargetingCookie]);
     (0, react_1.useEffect)(() => {
         if (typeof (window === null || window === void 0 ? void 0 : window.fbq) === 'function') {
             window === null || window === void 0 ? void 0 : window.fbq('track', 'PageView');
@@ -449,7 +509,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     }, [data]);
     const bffEventReport = (0, react_1.useCallback)(({ userInfo, eventInfo, reportLayId = true }) => {
         var _a, _b;
-        if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
+        if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) || isActiveTargetingCookie) {
             return;
         }
         if (!userInfo) {
@@ -486,7 +546,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         layoutVariantId,
         globalConfig,
         playbookType,
-        bffDataSource
+        bffDataSource,
+        isActiveTargetingCookie
     ]);
     const getEventParamsByJson = (0, react_1.useCallback)((json, product) => {
         var _a, _b, _c;
@@ -551,7 +612,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     }, [fakeUserId]);
     const bffFbReport = (0, react_1.useCallback)(({ eventName, product }) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
+        if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) || isActiveTargetingCookie) {
             return;
         }
         let isPushState = false;
@@ -617,7 +678,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
                 type: 'beacon'
             });
         }
-    }, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig, bffDataSource, getEventParamsByJson]);
+    }, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig, bffDataSource, getEventParamsByJson, isActiveTargetingCookie]);
     const bffMutateLike = (0, react_1.useCallback)((body) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
         const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/like', { method: 'POST', body }));
         return res === null || res === void 0 ? void 0 : res.success;

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

@@ -13,4 +13,6 @@ declare function getDevice(): string | null;
 declare function getCookie(val: string): string;
 declare function getScreenReader(): boolean;
 declare function splitUrlParams(urlParams: string): string[] | undefined;
-export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader, splitUrlParams };
+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 };

package/lib/core/utils/tool.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.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('');
@@ -205,3 +205,33 @@ function splitUrlParams(urlParams) {
     return splitList !== null && splitList !== void 0 ? splitList : [];
 }
 exports.splitUrlParams = splitUrlParams;
+function deleteCookie(name, path = '/', domain = '') {
+    const expiration = 'expires=Thu, 01 Jan 1970 00:00:00 GMT';
+    const pathPart = path ? `; path=${path}` : '';
+    const domainPart = domain ? `; domain=${domain}` : '';
+    document.cookie = `${name}=; ${expiration}${pathPart}${domainPart}`;
+    console.log(`已尝试删除Cookie: ${name}`);
+}
+exports.deleteCookie = deleteCookie;
+function setCookie(name, value, days = 0, path = '/', domain = '', secure = false, sameSite = 'Lax') {
+    let cookieString = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
+    if (days) {
+        const date = new Date();
+        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+        cookieString += `; expires=${date.toUTCString()}`;
+    }
+    if (path) {
+        cookieString += `; path=${path}`;
+    }
+    if (domain) {
+        cookieString += `; domain=${domain}`;
+    }
+    if (secure) {
+        cookieString += '; secure';
+    }
+    if (sameSite) {
+        cookieString += `; samesite=${sameSite}`;
+    }
+    document.cookie = cookieString;
+}
+exports.setCookie = setCookie;

package/package.json

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