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

package/es/materials/sxp/template/MultiCommodity/index.js

@@ -4,10 +4,10 @@ import React, { memo, useState } from 'react';
 import { SwiperSlide } from 'swiper/react';
 import Img from '../components/Img';
 import Scroll from '../components/Scroll';
-import EventProvider from '../components/EventProvider';
 import styles from './index.module.less';
 import { useSxpDataSource } from '../../../../core/hooks';
 import { setFontForText } from '../../../../core/utils/tool';
+import EventProvider from '../components/EventProvider';
 const MultiCommodity = (_a) => {
     var _b, _c;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
@@ -15,7 +15,7 @@ const MultiCommodity = (_a) => {
     const [products] = useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
     return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginInlineStart: 0, marginInlineEnd: '8px' })), tag: 'li', role: 'listitem' },
+        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
             React.createElement(EventProvider, Object.assign({ rec: recData, multItem: item, multiCheckIndex: itemIndex, index: index }, 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: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
                 React.createElement("div", { className: css({

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

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

package/es/materials/sxp/template/MultiCommodityDiro/index.js

@@ -4,10 +4,10 @@ import React, { memo, useState } from 'react';
 import { SwiperSlide } from 'swiper/react';
 import Scroll from '../components/Scroll';
 import Img from '../components/Img';
-import EventProvider from '../components/EventProvider';
 import styles from './index.module.less';
 import { useSxpDataSource } from '../../../../core/hooks';
 import { setFontForText } from '../../../../core/utils/tool';
+import EventProvider from '../components/EventProvider';
 const MultiCommodityDiro = (_a) => {
     var _b, _c;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
@@ -15,7 +15,7 @@ const MultiCommodityDiro = (_a) => {
     const [products] = useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
     return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginInlineStart: 0, marginInlineEnd: '8px' })), tag: 'li', role: 'listitem' },
+        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
             React.createElement(EventProvider, Object.assign({ rec: recData, multItem: item, multiCheckIndex: itemIndex, index: index }, 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: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
                 React.createElement("div", { className: css({

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

@@ -19,11 +19,12 @@ const MultiCommodityDiro = createMaterial(MultiCommodityDiroComponent, {
                     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/MultiCommodityDiroNew/index.js

@@ -4,10 +4,10 @@ import React, { memo, useState } from 'react';
 import { SwiperSlide } from 'swiper/react';
 import Scroll from '../components/Scroll';
 import Img from '../components/Img';
-import EventProvider from '../components/EventProvider';
 import styles from './index.module.less';
 import { useSxpDataSource } from '../../../../core/hooks';
 import { setFontForText } from '../../../../core/utils/tool';
+import EventProvider from '../components/EventProvider';
 const MultiCommodityDiroNew = (_a) => {
     var _b, _c;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
@@ -15,7 +15,7 @@ const MultiCommodityDiroNew = (_a) => {
     const [products] = useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
     return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginInlineStart: 0, marginInlineEnd: '8px' })), tag: 'li', role: 'listitem' },
+        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
             React.createElement(EventProvider, Object.assign({ rec: recData, multItem: item, multiCheckIndex: itemIndex, index: index }, 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: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
                 React.createElement("div", { className: css({

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

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

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

@@ -19,11 +19,12 @@ const NineCommodity = createMaterial(NineCommodityComponent, {
                     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/components/CommodityGroup.js

@@ -21,7 +21,7 @@ const CommodityGroup = ({ products, data, defImg, style, onCLick, popupDetailDat
         return (React.createElement(React.Fragment, null, (item === null || item === void 0 ? void 0 : item.bindCta) ? (React.createElement(SwiperSlide, { className: css({
                 width: '50px',
                 height: '50px',
-                marginInlineEnd: '10px'
+                marginRight: '10px'
             }), onClick: () => {
                 handleClick(item, index);
             }, key: index },

package/es/materials/sxp/template/components/settingRender.js

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

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

@@ -62,7 +62,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_1.default.createElement("div", { className: 'clc-sxp-bottom-card' },
-                react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, isActive: true })));
+                react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER })));
         }
         return null;
     };
@@ -75,10 +75,8 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
                     react_1.default.createElement(Nudge_1.default, { nudge: nudge }),
                     CTA(rec, index),
                     react_1.default.createElement("div", null,
-                        react_1.default.createElement(ExpandableText_1.default, { 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_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, includesCtaType: ['AniLink'], isActive: true })),
-                    react_1.default.createElement(Hashtag_1.default, { 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_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, includesCtaType: ['AniLinkPopup'], isActive: true })));
+                        react_1.default.createElement(ExpandableText_1.default, { 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_1.default.createElement(Hashtag_1.default, { 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/lib/core/components/DiyStoryPreview/index.js

@@ -84,10 +84,21 @@ const DiyStoryPreview = (0, react_1.forwardRef)(({ data = [], globalConfig, tipT
         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_1.default.createElement(react_1.default.Fragment, null,
-                ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.title) && (react_1.default.createElement("div", { style: {
+                ((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && (react_1.default.createElement("div", { style: {
                         background: 'repeating-linear-gradient(0deg, rgba(26, 26, 25, 0.7), hsla(0, 0%, 100%, 0))',
                         height: '130px',
                         position: 'absolute',
@@ -98,7 +109,7 @@ const DiyStoryPreview = (0, react_1.forwardRef)(({ data = [], globalConfig, tipT
                         pointerEvents
                     } })),
                 react_1.default.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,
@@ -107,11 +118,11 @@ const DiyStoryPreview = (0, react_1.forwardRef)(({ data = [], globalConfig, tipT
                         paddingTop: '20px'
                     } },
                     (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (react_1.default.createElement("div", { style: {} },
-                        react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, isActive: index === activeIndex }))) : null,
+                        react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, isActive: index === activeIndex, value: value }))) : null,
                     react_1.default.createElement("div", null,
-                        react_1.default.createElement(ExpandableText_1.default, { 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_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, includesCtaType: ['AniLink'], isActive: index === activeIndex }))),
-                react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex })));
+                        react_1.default.createElement(ExpandableText_1.default, { 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_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }))),
+                react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
         }
         return null;
     };

package/lib/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/lib/core/components/SxpPageRender/RenderCard.js

@@ -6,22 +6,10 @@ require("./index.less");
 const lodash_1 = require("lodash");
 const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/withBindDataSource"));
 const hooks_1 = require("../../../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 } = (0, hooks_1.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 = (0, react_1.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)))
@@ -46,7 +34,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_1.default.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_1.default.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/lib/core/components/SxpPageRender/index.js

@@ -29,6 +29,7 @@ const ConsentPopup_1 = tslib_1.__importDefault(require("./ConsentPopup"));
 const MultiPosts_1 = tslib_1.__importDefault(require("../../../materials/sxp/MultiPosts"));
 const EditorDataProvider_1 = require("../../../core/context/EditorDataProvider");
 const NavBack_1 = tslib_1.__importDefault(require("./NavBack"));
+const tool_1 = require("../../../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 = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
@@ -45,6 +46,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const skipLinkRef = (0, react_1.useRef)(false);
     const [pageNum, setPageNum] = (0, react_1.useState)(2);
     const videoWidgetRef = (0, react_1.useRef)(null);
+    const fbcRef = (0, react_1.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 } = (0, hooks_1.useSxpDataSource)();
     const { backMainFeed, productView, jumpToWeb } = (0, useEventReport_1.useEventReport)();
     const isShowFingerTip = (0, react_1.useMemo)(() => {
@@ -317,17 +319,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_1.default.createElement(react_1.default.Fragment, null,
-                isNineProduct && (react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, isNineProduct: isNineProduct })),
+                isNineProduct && (react_1.default.createElement(RenderCard_1.default, { 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_1.default.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
                 react_1.default.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_1.default.createElement(Nudge_1.default, { nudge: nudge }),
                     ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) && !isNineProduct ? (react_1.default.createElement("div", { className: 'clc-sxp-bottom-card' },
-                        react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex }))) : null,
+                        react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
                     react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
                         react_1.default.createElement(ExpandableText_1.default, { 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_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex }),
+                        react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
                         react_1.default.createElement(Hashtag_1.default, { 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_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex })));
+                react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
         }
         return null;
     }, [
@@ -482,6 +484,35 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             viewTime.current = new Date();
         }
     }, [openHashtag, data, activeIndex]);
+    (0, react_1.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) {
+                    (0, tool_1.setCookie)('_fbc', fbcRef.current, 90);
+                }
+            }
+            else {
+                fbcRef.current = (0, tool_1.getCookie)('_fbc');
+                (0, tool_1.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/lib/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/lib/core/context/SxpDataSourceProvider.js

@@ -53,7 +53,6 @@ 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) &&
@@ -109,23 +108,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']) + (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)(() => {
+    const getTargetingCookie = () => {
         var _a;
         function isTargetingRejected(cookieValue) {
             const groupsMatch = cookieValue.match(/groups=([^&]+)/);
@@ -151,11 +134,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 = (0, react_1.useCallback)((path, options, isBota = true) => {
         var _a;
         if (!bffDataSource)
@@ -183,7 +167,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     }, [bffDataSource, fakeUserId]);
     const bffCollectEvent = (0, react_1.useCallback)((params) => {
         var _a;
-        if (isActiveTargetingCookie)
+        if (getTargetingCookie())
             return Promise.resolve();
         const body = {
             eventName: params === null || params === void 0 ? void 0 : params.eventName,
@@ -194,7 +178,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             body,
             type: 'beacon'
         }, false);
-    }, [bffFetch, bffDataSource, isActiveTargetingCookie]);
+    }, [bffFetch, bffDataSource]);
     (0, react_1.useEffect)(() => {
         const OriginalImage = window.Image;
         window.Image = function () {
@@ -202,7 +186,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);
@@ -222,7 +206,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             });
             return img;
         };
-    }, [bffCollectEvent, isActiveTargetingCookie]);
+    }, [bffCollectEvent]);
     (0, react_1.useEffect)(() => {
         const navigatorWithBeacon = navigator;
         if (!navigatorWithBeacon.sendBeacon) {
@@ -232,7 +216,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);
@@ -280,7 +264,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         return () => {
             navigatorWithBeacon.sendBeacon = originalSendBeacon;
         };
-    }, [bffCollectEvent, isActiveTargetingCookie]);
+    }, [bffCollectEvent]);
     (0, react_1.useEffect)(() => {
         const _originalFetch = window.fetch;
         window.fetch = function (input, init) {
@@ -300,7 +284,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);
@@ -344,7 +328,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
                 }
             });
         };
-    }, [bffCollectEvent, isActiveTargetingCookie]);
+    }, [bffCollectEvent]);
     (0, react_1.useEffect)(() => {
         const originalOpen = XMLHttpRequest.prototype.open;
         const originalSend = XMLHttpRequest.prototype.send;
@@ -354,7 +338,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')) {
@@ -382,7 +366,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             XMLHttpRequest.prototype.open = originalOpen;
             XMLHttpRequest.prototype.send = originalSend;
         };
-    }, [bffCollectEvent, isActiveTargetingCookie]);
+    }, [bffCollectEvent]);
     (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');
@@ -507,9 +491,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         }
         return expire;
     }, [data]);
-    const bffEventReport = (0, react_1.useCallback)(({ userInfo, eventInfo, reportLayId = true }) => {
+    const bffEventReport = (0, react_1.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) {
@@ -546,8 +530,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         layoutVariantId,
         globalConfig,
         playbookType,
-        bffDataSource,
-        isActiveTargetingCookie
+        bffDataSource
     ]);
     const getEventParamsByJson = (0, react_1.useCallback)((json, product) => {
         var _a, _b, _c;
@@ -612,7 +595,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) || isActiveTargetingCookie) {
+        if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) || getTargetingCookie()) {
             return;
         }
         let isPushState = false;
@@ -678,7 +661,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
                 type: 'beacon'
             });
         }
-    }, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig, bffDataSource, getEventParamsByJson, isActiveTargetingCookie]);
+    }, [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/consentPopup/Display/index.js

@@ -28,7 +28,7 @@ const Display = (_a) => {
             react_1.default.createElement("span", { style: content === null || content === void 0 ? void 0 : content.style, dangerouslySetInnerHTML: {
                     __html: (0, tool_1.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_1.default.createElement("span", { style: Object.assign(Object.assign({}, interaction === null || interaction === void 0 ? void 0 : interaction.style), { marginInlineStart: '5px' }), dangerouslySetInnerHTML: {
+            react_1.default.createElement("span", { style: Object.assign(Object.assign({}, interaction === null || interaction === void 0 ? void 0 : interaction.style), { marginLeft: '5px' }), dangerouslySetInnerHTML: {
                     __html: (0, tool_1.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_1.default.createElement("button", { "aria-label": 'close', className: 'consentPopupDisplay-close', onClick: handleClickClose },

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

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AniLinkPopup = void 0;
 const tslib_1 = require("tslib");
 const settingRender_1 = tslib_1.__importDefault(require("./settingRender"));
-const interactionRender_1 = tslib_1.__importDefault(require("./interactionRender"));
 const _1 = tslib_1.__importDefault(require("."));
 const create_1 = require("../../../../core/create");
+const interactionRender_1 = tslib_1.__importDefault(require("./interactionRender"));
 const AniLinkPopup = (0, create_1.createMaterial)(_1.default, {
     displayName: '竖版弹窗CTA',
     icon: '',
@@ -28,6 +28,7 @@ const AniLinkPopup = (0, create_1.createMaterial)(_1.default, {
                 title: {
                     fontSize: 14,
                     color: '#000',
+                    textAlign: 'left',
                     lineHeight: 2.6
                 },
                 ctaTitle: {

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

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CommodityDetail = void 0;
 const tslib_1 = require("tslib");
 const settingRender_1 = tslib_1.__importDefault(require("./settingRender"));
-const interactionRender_1 = tslib_1.__importDefault(require("./interactionRender"));
 const _1 = tslib_1.__importDefault(require("."));
 const create_1 = require("../../../../core/create");
+const interactionRender_1 = tslib_1.__importDefault(require("./interactionRender"));
 const CommodityDetail = (0, create_1.createMaterial)(_1.default, {
     displayName: '商品详情',
     icon: '',
@@ -44,6 +44,7 @@ const CommodityDetail = (0, create_1.createMaterial)(_1.default, {
                 taxInfo: {
                     color: '#000',
                     fontSize: 13,
+                    textAlign: 'left',
                     marginBottom: '10px'
                 }
             },