pb-sxp-ui 1.15.22-alpha.5 → 1.15.23

package/lib/core/context/SxpDataSourceProvider.js

@@ -108,6 +108,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         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]);
     const bffFetch = (0, react_1.useCallback)((path, options) => {
+        var _a, _b;
         if (!bffDataSource)
             return;
         const url = bffDataSource.url;
@@ -115,7 +116,33 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             const queryString = qs_1.default.stringify(options.query);
             path = `${path}?${queryString}`;
         }
-        if (options.type === 'beacon' && navigator.sendBeacon) {
+        let isTikTokChannel = false;
+        const params = {};
+        const queryString = location.search.slice(1);
+        (_a = (0, tool_1.splitUrlParams)(queryString)) === null || _a === void 0 ? void 0 : _a.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;
+        if (cl_source &&
+            ((_b = [
+                '40A-SPRK--DRESS_EYEWEAR-',
+                '41A-SPRK--MADRAGUE-',
+                '42A-SPRK--MOOD-',
+                '43A-SPRK--SUMMER-',
+                '44A-SPRK--DRESS_EYEWEAR-',
+                '45A-SPRK--MADRAGUE-',
+                '46A-SPRK--MOOD-',
+                '47A-SPRK--SUMMER-',
+                '48A-SPRK--DRESS_EYEWEAR-',
+                '49A-SPRK--MADRAGUE-',
+                '50A-SPRK--MOOD-',
+                '51A-SPRK--SUMMER-'
+            ]) === null || _b === void 0 ? void 0 : _b.includes(cl_source))) {
+            isTikTokChannel = true;
+        }
+        if (options.type === 'beacon' && navigator.sendBeacon && !isTikTokChannel) {
             return navigator.sendBeacon(`${url}/api/${path}`, new Blob([
                 JSON.stringify({
                     body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
@@ -125,11 +152,11 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             }));
         }
         return window
-            .fetch(`${url}/api/${path}`, {
-            headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers),
-            method: options.method,
-            body: JSON.stringify(options.body)
-        })
+            .fetch(`${url}/api/${path}`, Object.assign({ headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers), method: options.method, body: isTikTokChannel
+                ? JSON.stringify({
+                    body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
+                })
+                : JSON.stringify(options.body) }, (isTikTokChannel && { keepalive: true })))
             .then((res) => res.json())
             .catch((err) => Promise.reject(err));
     }, [bffDataSource, fakeUserId]);
@@ -294,23 +321,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         playbookType,
         bffDataSource
     ]);
-    const bffFbReport = (0, react_1.useCallback)(({ eventName, product }) => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        if (!enableReportEvent ||
-            !enabledMetaConversionApi ||
-            (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
-            !((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName])) {
-            return;
-        }
-        const jsonParams = (0, lodash_1.cloneDeep)((_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _b === void 0 ? void 0 : _b[eventName]);
+    const getEventParamsByJson = (0, react_1.useCallback)((json, product) => {
+        var _a, _b, _c;
+        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: (_c = window === null || window === void 0 ? void 0 : window.location) === null || _c === void 0 ? void 0 : _c.href,
+            event_source_url: (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href,
             external_id: fakeUserId,
-            client_user_agent: (_e = (_d = window === null || window === void 0 ? void 0 : window.navigator) === null || _d === void 0 ? void 0 : _d.userAgent) !== null && _e !== void 0 ? _e : '',
+            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 : '',
             fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
-            fbp: (0, tool_1.getCookie)('_fbp') ? `fb.2.${new Date().getTime()}.${(0, tool_1.getCookie)('_fbp')}` : '',
+            fbp: (0, tool_1.getCookie)('_fbp') ? `${(0, tool_1.getCookie)('_fbp')}` : '',
             time: Math.floor(Date.now() / 1000)
         };
         const regex = /\{\{(.*?)\}\}/g;
@@ -322,7 +343,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             }
             else {
                 for (const key in obj) {
-                    if (obj.hasOwnProperty(key)) {
+                    if (Object.prototype.hasOwnProperty.call(obj, key)) {
                         const value = obj === null || obj === void 0 ? void 0 : obj[key];
                         if (typeof value === 'object') {
                             getEventParams(value);
@@ -359,28 +380,59 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             }
         };
         getEventParams(jsonParams);
-        const params = {};
-        const queryString = location.search.slice(1);
-        (_f = (0, tool_1.splitUrlParams)(queryString)) === null || _f === void 0 ? void 0 : _f.map((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;
-        return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_g = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _g === void 0 ? void 0 : _g['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
-            method: 'POST',
-            body: jsonParams,
-            type: 'beacon'
-        });
-    }, [
-        bffFetch,
-        enableReportEvent,
-        enabledMetaConversionApi,
-        globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview,
-        globalConfig,
-        fakeUserId,
-        bffDataSource
-    ]);
+        return jsonParams;
+    }, [fakeUserId]);
+    const bffFbReport = (0, react_1.useCallback)(({ eventName, product }) => {
+        var _a, _b, _c, _d;
+        if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
+            return;
+        }
+        const pixelEventParamsJson = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.pixel) === null || _a === void 0 ? void 0 : _a[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');
+                const separator = uri.indexOf('?') !== -1 ? '&' : '?';
+                if (uri.match(re)) {
+                    return uri.replace(re, '$1' + key + '=' + value + '$2');
+                }
+                else {
+                    return uri + separator + key + '=' + value;
+                }
+            }
+            if (eventName === 'PageView' && (pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name) === 'PageView') {
+                const currentUrl = window.location.href;
+                const newUrl = updateQueryStringParameter(currentUrl, 'timestamp', Date.now());
+                history.pushState({ path: newUrl }, '', newUrl);
+            }
+            else {
+                const body = getEventParamsByJson(pixelEventParamsJson);
+                window === null || window === void 0 ? void 0 : window.fbq('track', pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name, body);
+                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');
+                }
+            }
+        }
+        else 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 converApiEventParamsJson = (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _b === void 0 ? void 0 : _b[eventName];
+        if (enabledMetaConversionApi && converApiEventParamsJson) {
+            const body = getEventParamsByJson(converApiEventParamsJson, product);
+            const params = {};
+            const queryString = location.search.slice(1);
+            (_c = (0, tool_1.splitUrlParams)(queryString)) === null || _c === void 0 ? void 0 : _c.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/${(_d = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _d === void 0 ? void 0 : _d['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
+                method: 'POST',
+                body,
+                type: 'beacon'
+            });
+        }
+    }, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig, bffDataSource, getEventParamsByJson]);
     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/materials/sxp/popup/CommodityDetail/index.js

@@ -3,6 +3,7 @@ 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 CommodityGroup_1 = tslib_1.__importDefault(require("../../template/components/CommodityGroup"));
 const hooks_1 = require("../../../../core/hooks");
 require("./index.less");
 const modules_1 = require("swiper/modules");
@@ -12,7 +13,6 @@ const Modal_1 = tslib_1.__importDefault(require("../../../../core/components/Sxp
 const ExpandableText_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/ExpandableText"));
 const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
 const tool_1 = require("../../../../core/utils/tool");
-const CommodityGroup_1 = tslib_1.__importDefault(require("../../template/components/CommodityGroup"));
 const materials_1 = require("../../../../core/utils/materials");
 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;
@@ -69,7 +69,7 @@ const CommodityDetail = (_a) => {
         };
     }, []);
     const priceText = (0, materials_1.getPriceText)({
-        product: product,
+        product,
         enableFormattedPrice: (_t = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _t === void 0 ? void 0 : _t.enableFormattedPrice,
         globalConfig,
         style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price

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

@@ -3,6 +3,7 @@ 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 CommodityGroup_1 = tslib_1.__importDefault(require("../../template/components/CommodityGroup"));
 const hooks_1 = require("../../../../core/hooks");
 require("./index.less");
 const modules_1 = require("swiper/modules");
@@ -12,7 +13,6 @@ const ExpandableText_1 = tslib_1.__importDefault(require("../../../../core/compo
 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 CommodityGroup_1 = tslib_1.__importDefault(require("../../template/components/CommodityGroup"));
 const materials_1 = require("../../../../core/utils/materials");
 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;

package/package.json

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