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

package/es/core/components/DiyPortalPreview/index.js

@@ -59,7 +59,7 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
     const CTA = (rec, index) => {
         if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) {
             return (React.createElement("div", { className: 'clc-sxp-bottom-card' },
-                React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, isActive: true })));
+                React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER })));
         }
         return null;
     };
@@ -72,10 +72,8 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
                     React.createElement(Nudge, { nudge: nudge }),
                     CTA(rec, index),
                     React.createElement("div", null,
-                        React.createElement(ExpandableText, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }) }),
-                        React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, includesCtaType: ['AniLink'], isActive: true })),
-                    React.createElement(Hashtag, { index: index, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })),
-                React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, includesCtaType: ['AniLinkPopup'], isActive: true })));
+                        React.createElement(ExpandableText, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }) })),
+                    React.createElement(Hashtag, { index: index, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))));
         }
         return null;
     };

package/es/core/components/DiyStoryPreview/index.js

@@ -81,10 +81,21 @@ const DiyStoryPreview = forwardRef(({ data = [], globalConfig, tipText, nudge, t
         return null;
     }, [globalConfig]);
     const renderBottom = (rec, index) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (rec === null || rec === void 0 ? void 0 : rec.video) {
+            let cta = null;
+            if ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) {
+                cta = '多商品CTA';
+            }
+            else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
+                cta = '商品CTA';
+            }
+            else {
+                cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
+            }
+            const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
             return (React.createElement(React.Fragment, null,
-                ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.title) && (React.createElement("div", { style: {
+                ((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && (React.createElement("div", { style: {
                         background: 'repeating-linear-gradient(0deg, rgba(26, 26, 25, 0.7), hsla(0, 0%, 100%, 0))',
                         height: '130px',
                         position: 'absolute',
@@ -95,7 +106,7 @@ const DiyStoryPreview = forwardRef(({ data = [], globalConfig, tipText, nudge, t
                         pointerEvents
                     } })),
                 React.createElement("div", { style: {
-                        marginBottom: `${(_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _b !== void 0 ? _b : 40}px`,
+                        marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px`,
                         zIndex: 999,
                         position: 'absolute',
                         bottom: 0,
@@ -104,11 +115,11 @@ const DiyStoryPreview = forwardRef(({ data = [], globalConfig, tipText, nudge, t
                         paddingTop: '20px'
                     } },
                     (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { style: {} },
-                        React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, isActive: index === activeIndex }))) : null,
+                        React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, isActive: index === activeIndex, value: value }))) : null,
                     React.createElement("div", null,
-                        React.createElement(ExpandableText, { isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.title) !== null && _d !== void 0 ? _d : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none', padding: '0 20px', fontSize: '12px' }) }),
-                        React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, includesCtaType: ['AniLink'], isActive: index === activeIndex }))),
-                React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex })));
+                        React.createElement(ExpandableText, { isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_j = (_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none', padding: '0 20px', fontSize: '12px' }) }),
+                        React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }))),
+                React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
         }
         return null;
     };

package/es/core/components/SxpPageRender/RenderCard.d.ts

@@ -8,6 +8,7 @@ interface IRenderCardProps {
     resolver: any;
     includesCtaType?: string[];
     isActive?: boolean;
+    value?: any;
     isNineProduct?: boolean;
 }
 declare const _default: React.NamedExoticComponent<IRenderCardProps>;

package/es/core/components/SxpPageRender/RenderCard.js

@@ -3,22 +3,10 @@ import './index.less';
 import { cloneDeep } from 'lodash';
 import withBindDataSource from '../../../core/hoc/withBindDataSource';
 import { useEditor } from '../../../core/hooks';
-const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive, isNineProduct }) => {
-    var _a, _b, _c, _d, _e;
+const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive, value, isNineProduct }) => {
     const { schema } = useEditor();
     if (!(rec === null || rec === void 0 ? void 0 : rec.video))
         return null;
-    let cta = null;
-    if ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) {
-        cta = '多商品CTA';
-    }
-    else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
-        cta = '商品CTA';
-    }
-    else {
-        cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
-    }
-    const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
     const renderComp = useMemo(() => {
         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;
         if (includesCtaType && !(includesCtaType === null || includesCtaType === void 0 ? void 0 : includesCtaType.includes((_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type)))
@@ -43,7 +31,7 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive,
                 const sbf = style.backdropFilter;
                 style.backdropFilter = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
             }
-            return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), style), { zIndex: 50, marginInlineStart: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.textStyle), bindDatas: (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.bindDatas) !== null && _1 !== void 0 ? _1 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.props, { event: ((_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index, isActive: isActive })));
+            return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.textStyle), bindDatas: (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.bindDatas) !== null && _1 !== void 0 ? _1 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.props, { event: ((_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index, isActive: isActive })));
         }
         else {
             return null;

package/es/core/components/SxpPageRender/index.js

@@ -26,6 +26,7 @@ import ConsentPopup from './ConsentPopup';
 import MultiPosts from '../../../materials/sxp/MultiPosts';
 import { useEditorDataProvider } from '../../../core/context/EditorDataProvider';
 import NavBack from './NavBack';
+import { deleteCookie, getCookie, setCookie } from '../../../core/utils/tool';
 const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], defaultData }) => {
     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;
     const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
@@ -42,6 +43,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const skipLinkRef = useRef(false);
     const [pageNum, setPageNum] = useState(2);
     const videoWidgetRef = useRef(null);
+    const fbcRef = useRef('');
     const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData, channel, refreshFeSession, isDiyH5 } = useSxpDataSource();
     const { backMainFeed, productView, jumpToWeb } = useEventReport();
     const isShowFingerTip = useMemo(() => {
@@ -314,17 +316,17 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 index === ((rtcList === null || rtcList === void 0 ? void 0 : rtcList[0]) === 'organic menu' ? 2 : 1) &&
                 ((_f = ['MultiCommodity', 'MultiCommodityDiro', 'MultiCommodityDiroNew']) === null || _f === void 0 ? void 0 : _f.includes((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.type));
             return (React.createElement(React.Fragment, null,
-                isNineProduct && (React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, isNineProduct: isNineProduct })),
+                isNineProduct && (React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value, isNineProduct: isNineProduct })),
                 ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
                 React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _j !== void 0 ? _j : 40}px` } },
                     React.createElement(Nudge, { nudge: nudge }),
                     ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) && !isNineProduct ? (React.createElement("div", { className: 'clc-sxp-bottom-card' },
-                        React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex }))) : null,
+                        React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
                     React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
                         React.createElement(ExpandableText, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.title) !== null && _l !== void 0 ? _l : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
-                        React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex }),
+                        React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
                         React.createElement(Hashtag, { index: activeIndex, tags: (_o = (_m = rec === null || rec === void 0 ? void 0 : rec.video) === null || _m === void 0 ? void 0 : _m.hashTags) !== null && _o !== void 0 ? _o : [], itemId: (_p = rec === null || rec === void 0 ? void 0 : rec.video) === null || _p === void 0 ? void 0 : _p.itemId, itemType: ((_q = rec === null || rec === void 0 ? void 0 : rec.video) === null || _q === void 0 ? void 0 : _q.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle, hashTagRightMargin: containerWidth - (hashTagRightMargin !== null && hashTagRightMargin !== void 0 ? hashTagRightMargin : 0) }))),
-                React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex })));
+                React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
         }
         return null;
     }, [
@@ -479,6 +481,35 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             viewTime.current = new Date();
         }
     }, [openHashtag, data, activeIndex]);
+    useEffect(() => {
+        if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting))
+            return;
+        window.OptanonWrapper = function () {
+            var _a, _b;
+            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')) {
+                if (fbcRef.current) {
+                    setCookie('_fbc', fbcRef.current, 90);
+                }
+            }
+            else {
+                fbcRef.current = getCookie('_fbc');
+                deleteCookie('_fbc');
+                const item = data[activeIndex];
+                const traceInfo = ((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.traceInfo) || ((_b = item === null || item === void 0 ? void 0 : item.product) === null || _b === void 0 ? void 0 : _b.traceInfo) || '';
+                bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                    eventInfo: {
+                        eventSubject: 'refuseCookie',
+                        eventDescription: 'refuseCookie',
+                        traceInfo
+                    },
+                    isActiveTargetingCookie: false
+                });
+            }
+        };
+    }, [globalConfig, bffEventReport, data, activeIndex]);
     const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         const item = data[activeIndex];

package/es/core/context/SxpDataSourceProvider.d.ts

@@ -43,6 +43,8 @@ export interface ISxpDataSourceContext {
     bffEventReport?: (body: {
         userInfo?: object;
         eventInfo: object;
+        reportLayId?: boolean;
+        isActiveTargetingCookie?: boolean;
     }) => Promise<any> | undefined | boolean;
     isPreview?: boolean;
     loading?: boolean;

package/es/core/context/SxpDataSourceProvider.js

@@ -7,7 +7,7 @@ import { storeAndLoadFeUserId, AGREE_POLICY } from '../utils/localStore';
 import { useIconLink } from '../components/SxpPageRender/useIconLink';
 import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../utils/event';
 import Consent from '../components/Consent';
-import { deleteCookie, getCookie, setCookie, splitUrlParams } from '../utils/tool';
+import { getCookie, splitUrlParams } from '../utils/tool';
 export const SxpDataSourceContext = createContext({
     rtcList: [],
     tagList: []
@@ -50,7 +50,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     const [chatlabsId, setChatlabsId] = useState();
     const finalPageData = useMemo(() => pageData !== null && pageData !== void 0 ? pageData : data, [pageData, data]);
     const pixelPvStatusRef = useRef(false);
-    const fbcRef = useRef('');
     const isShowConsent = 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) &&
@@ -106,23 +105,7 @@ 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']) + storeAndLoadFeUserId();
     }, [bffDataSource]);
-    useEffect(() => {
-        if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting))
-            return;
-        fbcRef.current = 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'))) {
-                deleteCookie('_fbc');
-            }
-            else if (fbcRef.current) {
-                setCookie('_fbc', fbcRef.current, 90);
-            }
-        };
-    }, [globalConfig]);
-    const isActiveTargetingCookie = useMemo(() => {
+    const getTargetingCookie = () => {
         var _a;
         function isTargetingRejected(cookieValue) {
             const groupsMatch = cookieValue.match(/groups=([^&]+)/);
@@ -148,11 +131,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             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')))) {
+        console.log('OptanonConsent:', window === null || window === void 0 ? void 0 : window.OnetrustActiveGroups);
+        if (((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 = useCallback((path, options, isBota = true) => {
         var _a;
         if (!bffDataSource)
@@ -180,7 +164,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     }, [bffDataSource, fakeUserId]);
     const bffCollectEvent = useCallback((params) => {
         var _a;
-        if (isActiveTargetingCookie)
+        if (getTargetingCookie())
             return Promise.resolve();
         const body = {
             eventName: params === null || params === void 0 ? void 0 : params.eventName,
@@ -191,7 +175,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             body,
             type: 'beacon'
         }, false);
-    }, [bffFetch, bffDataSource, isActiveTargetingCookie]);
+    }, [bffFetch, bffDataSource]);
     useEffect(() => {
         const OriginalImage = window.Image;
         window.Image = function () {
@@ -199,7 +183,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             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'))) {
+                    if (getTargetingCookie() && (value.includes('https://www.facebook.com/privacy_sandbox/pixel/register/trigger/') || value.includes('https://www.facebook.com/tr'))) {
                         return;
                     }
                     originalSrcDescriptor.set.call(this, value);
@@ -219,7 +203,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             });
             return img;
         };
-    }, [bffCollectEvent, isActiveTargetingCookie]);
+    }, [bffCollectEvent]);
     useEffect(() => {
         const navigatorWithBeacon = navigator;
         if (!navigatorWithBeacon.sendBeacon) {
@@ -229,7 +213,7 @@ 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'))) {
+            if (getTargetingCookie() && (urlString.includes('https://tr.snapchat.com/p') || urlString.includes('https://analytics.tiktok.com/api/v2/pixel'))) {
                 return true;
             }
             const success = originalSendBeacon(url, data);
@@ -277,7 +261,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         return () => {
             navigatorWithBeacon.sendBeacon = originalSendBeacon;
         };
-    }, [bffCollectEvent, isActiveTargetingCookie]);
+    }, [bffCollectEvent]);
     useEffect(() => {
         const _originalFetch = window.fetch;
         window.fetch = function (input, init) {
@@ -297,7 +281,7 @@ 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'))) {
+                    if (getTargetingCookie() && (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);
@@ -341,7 +325,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
                 }
             });
         };
-    }, [bffCollectEvent, isActiveTargetingCookie]);
+    }, [bffCollectEvent]);
     useEffect(() => {
         const originalOpen = XMLHttpRequest.prototype.open;
         const originalSend = XMLHttpRequest.prototype.send;
@@ -351,7 +335,7 @@ 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'))) {
+            if (getTargetingCookie() && 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')) {
@@ -379,7 +363,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             XMLHttpRequest.prototype.open = originalOpen;
             XMLHttpRequest.prototype.send = originalSend;
         };
-    }, [bffCollectEvent, isActiveTargetingCookie]);
+    }, [bffCollectEvent]);
     useEffect(() => {
         if (typeof (window === null || window === void 0 ? void 0 : window.fbq) === 'function') {
             window === null || window === void 0 ? void 0 : window.fbq('track', 'PageView');
@@ -504,9 +488,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         }
         return expire;
     }, [data]);
-    const bffEventReport = useCallback(({ userInfo, eventInfo, reportLayId = true }) => {
+    const bffEventReport = useCallback(({ userInfo, eventInfo, reportLayId = true, isActiveTargetingCookie = true }) => {
         var _a, _b;
-        if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) || isActiveTargetingCookie) {
+        if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) || (isActiveTargetingCookie && getTargetingCookie())) {
             return;
         }
         if (!userInfo) {
@@ -543,8 +527,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         layoutVariantId,
         globalConfig,
         playbookType,
-        bffDataSource,
-        isActiveTargetingCookie
+        bffDataSource
     ]);
     const getEventParamsByJson = useCallback((json, product) => {
         var _a, _b, _c;
@@ -609,7 +592,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     }, [fakeUserId]);
     const bffFbReport = 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) || isActiveTargetingCookie) {
+        if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) || getTargetingCookie()) {
             return;
         }
         let isPushState = false;
@@ -675,7 +658,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
                 type: 'beacon'
             });
         }
-    }, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig, bffDataSource, getEventParamsByJson, isActiveTargetingCookie]);
+    }, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig, bffDataSource, getEventParamsByJson]);
     const bffMutateLike = useCallback((body) => __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/es/materials/sxp/consentPopup/Display/index.js

@@ -26,7 +26,7 @@ const Display = (_a) => {
             React.createElement("span", { style: content === null || content === void 0 ? void 0 : content.style, dangerouslySetInnerHTML: {
                     __html: setFontForText((_b = content === null || content === void 0 ? void 0 : content.text) === null || _b === void 0 ? void 0 : _b.replace(/\n/g, '</br>'), content === null || content === void 0 ? void 0 : content.style)
                 } }),
-            React.createElement("span", { style: Object.assign(Object.assign({}, interaction === null || interaction === void 0 ? void 0 : interaction.style), { marginInlineStart: '5px' }), dangerouslySetInnerHTML: {
+            React.createElement("span", { style: Object.assign(Object.assign({}, interaction === null || interaction === void 0 ? void 0 : interaction.style), { marginLeft: '5px' }), dangerouslySetInnerHTML: {
                     __html: setFontForText((_c = interaction === null || interaction === void 0 ? void 0 : interaction.text) === null || _c === void 0 ? void 0 : _c.replace(/\n/g, '</br>'), interaction === null || interaction === void 0 ? void 0 : interaction.style)
                 }, onClick: handleClick })),
         isShowClose && (React.createElement("button", { "aria-label": 'close', className: 'consentPopupDisplay-close', onClick: handleClickClose },

package/es/materials/sxp/cta/AniLinkPopup/material.js

@@ -1,14 +1,14 @@
 import settingRender from './settingRender';
-import interactionRender from './interactionRender';
 import AniLinkPopupComponent from '.';
 import { createMaterial } from '../../../../core/create';
+import interactionRender from './interactionRender';
 const AniLinkPopup = createMaterial(AniLinkPopupComponent, {
     displayName: '竖版弹窗CTA',
     icon: '',
     category: 'cta',
     type: 'AniLinkPopup',
     related: {
-        settingRender,
+        settingRender: settingRender,
         bindableProps: [],
         interactionRender
     },
@@ -24,6 +24,7 @@ const AniLinkPopup = createMaterial(AniLinkPopupComponent, {
                 title: {
                     fontSize: 14,
                     color: '#000',
+                    textAlign: 'left',
                     lineHeight: 2.6
                 },
                 ctaTitle: {

package/es/materials/sxp/popup/CommodityDetail/material.js

@@ -1,7 +1,7 @@
 import settingRender from './settingRender';
-import interactionRender from './interactionRender';
 import CommodityDetailComponent from '.';
 import { createMaterial } from '../../../../core/create';
+import interactionRender from './interactionRender';
 const CommodityDetail = createMaterial(CommodityDetailComponent, {
     displayName: '商品详情',
     icon: '',
@@ -40,6 +40,7 @@ const CommodityDetail = createMaterial(CommodityDetailComponent, {
                 taxInfo: {
                     color: '#000',
                     fontSize: 13,
+                    textAlign: 'left',
                     marginBottom: '10px'
                 }
             },

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

@@ -1,12 +1,12 @@
 import { __rest } from "tslib";
 import { css } from '@emotion/css';
 import React, { memo, useCallback, useEffect } from 'react';
-import { throttle } from 'lodash';
-import Img from '../../template/components/Img';
 import { useEditor, useSxpDataSource } from '../../../../core/hooks';
 import './index.less';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
 import { setFontForText } from '../../../../core/utils/tool';
+import Img from '../../template/components/Img';
+import { throttle } from 'lodash';
 import { getPriceText } from '../../../../core/utils/materials';
 const CommodityList = (_a) => {
     var _b, _c, _d;
@@ -53,11 +53,12 @@ const CommodityList = (_a) => {
             React.createElement("button", Object.assign({ role: 'button', "aria-label": item === null || item === void 0 ? void 0 : item.title, tabIndex: 0, className: css({
                     display: 'flex',
                     alignItems: 'normal',
-                    width: '100%'
+                    width: '100%',
+                    textAlign: 'left'
                 }) }, props),
                 React.createElement(Img, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: commodityPicture, enableEventReport: false }),
                 React.createElement("div", { style: {
-                        width: `calc(100% - ${(_e = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.width) !== null && _e !== void 0 ? _e : 0}px - ${(_f = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.marginInlineEnd) !== null && _f !== void 0 ? _f : 0}px)`,
+                        width: `calc(100% - ${(_e = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.width) !== null && _e !== void 0 ? _e : 0}px - ${(_f = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.marginRight) !== null && _f !== void 0 ? _f : 0}px)`,
                         display: 'flex',
                         flexDirection: 'column',
                         justifyContent: 'space-between'

package/es/materials/sxp/popup/CommodityList/material.js

@@ -16,7 +16,7 @@ const CommodityList = createMaterial(CommodityListComponent, {
             commodityPicture: {
                 width: 100,
                 height: 100,
-                marginInlineEnd: 10
+                marginRight: 10
             },
             commodityStyles: {
                 price: {

package/es/materials/sxp/popup/CommodityList/settingRender.js

@@ -71,7 +71,7 @@ export default [
                 type: 'Number',
                 label: '与右侧边距',
                 addonAfter: 'px',
-                name: ['props', 'commodityPicture', 'marginInlineEnd']
+                name: ['props', 'commodityPicture', 'marginRight']
             },
             {
                 label: '居中垂直偏移',

package/es/materials/sxp/template/Appoint/material.js

@@ -19,11 +19,12 @@ const Appoint = createMaterial(AppointComponent, {
                     borderRadius: 3,
                     width: 30,
                     height: 30,
-                    marginInlineEnd: 8
+                    marginRight: 8
                 },
                 ctaTitle: {
                     fontSize: 12,
                     color: '#fff',
+                    textAlign: 'left',
                     width: 130,
                     height: 20
                 }

package/es/materials/sxp/template/Commodity/material.js

@@ -19,11 +19,12 @@ const Commodity = createMaterial(CommodityComponent, {
                     borderRadius: 3,
                     width: 60,
                     height: 60,
-                    marginInlineEnd: 8
+                    marginRight: 8
                 },
                 title: {
                     fontSize: 12,
-                    color: '#fff'
+                    color: '#fff',
+                    textAlign: 'left'
                 },
                 ctaTitle: {
                     fontSize: 10,

package/es/materials/sxp/template/CommodityDiro/material.js

@@ -19,11 +19,12 @@ const CommodityDiro = createMaterial(CommodityDiroComponent, {
                     borderRadius: 3,
                     width: 60,
                     height: 60,
-                    marginInlineEnd: 8
+                    marginRight: 8
                 },
                 title: {
                     fontSize: 12,
-                    color: '#000'
+                    color: '#000',
+                    textAlign: 'left'
                 },
                 ctaTitle: {
                     fontSize: 10,

package/es/materials/sxp/template/CommodityDiroNew/material.js

@@ -19,17 +19,19 @@ const CommodityDiroNew = createMaterial(CommodityDiroNewComponent, {
                     borderRadius: 8,
                     width: 78,
                     height: 78,
-                    marginInlineEnd: 16
+                    marginRight: 16
                 },
                 title: {
                     fontSize: 13,
-                    color: '#000'
+                    color: '#000',
+                    textAlign: 'left'
                 },
                 ctaTitle: {
                     textDecoration: 'underline',
                     fontSize: 14,
                     fontWeight: 'bold',
                     color: '#000',
+                    textAlign: 'left',
                     width: 150,
                     height: 20
                 }

package/es/materials/sxp/template/Link/material.js

@@ -1,9 +1,9 @@
 var _a;
 import settingRender from '../components/settingRender';
 import linkSettingRender from './settingRender';
-import interactionRender from './interactionRender';
 import LinkComponent from '.';
 import { createMaterial } from '../../../../core/create';
+import interactionRender from './interactionRender';
 const Link = createMaterial(LinkComponent, {
     displayName: '普通CTA',
     icon: '',
@@ -21,17 +21,19 @@ const Link = createMaterial(LinkComponent, {
                     borderRadius: 3,
                     width: 60,
                     height: 60,
-                    marginInlineEnd: 8
+                    marginRight: 8
                 },
                 ctaTitle: {
                     fontSize: 12,
                     color: '#fff',
+                    textAlign: 'left',
                     width: 130,
                     height: 20
                 }
             },
             customTitle: {
                 style: {
+                    textAlign: 'left',
                     textDecoration: 'underline',
                     fontWeight: 'bold',
                     width: 130,