pb-sxp-ui 1.20.17 → 1.20.19

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

@@ -0,0 +1,277 @@
+export default [
+    {
+        title: 'Shopify配置',
+        child: [
+            {
+                type: 'Input',
+                label: 'Shopify域名',
+                name: ['props', 'shopifyDomain'],
+                placeholder: 'your-store.myshopify.com'
+            },
+            {
+                type: 'Input',
+                label: 'Storefront Token',
+                name: ['props', 'storefrontAccessToken'],
+                placeholder: 'Storefront Access Token'
+            }
+        ]
+    },
+    {
+        title: '弹窗背景',
+        child: [
+            {
+                type: 'Number',
+                label: '左右边距',
+                name: ['props', 'popupBg', 'horizontalMargin']
+            },
+            {
+                type: 'Number',
+                label: '下边距',
+                name: ['props', 'popupBg', 'bottomMargin']
+            }
+        ]
+    },
+    {
+        title: '商品信息样式',
+        child: [
+            {
+                name: ['props', 'variantStyles'],
+                type: 'SelectLinkage',
+                child: [
+                    {
+                        label: '字段',
+                        type: 'Select',
+                        options: [
+                            {
+                                label: '商品标题',
+                                value: 'title'
+                            },
+                            {
+                                label: '价格',
+                                value: 'price'
+                            },
+                            {
+                                label: '规格选项',
+                                value: 'option'
+                            },
+                            {
+                                label: '已选规格',
+                                value: 'selectedOption'
+                            }
+                        ],
+                        name: ['props', 'variantStyles', 'field'],
+                        initialValue: 'title'
+                    },
+                    {
+                        type: 'Group',
+                        child: [
+                            {
+                                label: '上边距',
+                                type: 'Number',
+                                addonAfter: 'px',
+                                name: ['marginTop']
+                            },
+                            {
+                                label: '下边距',
+                                type: 'Number',
+                                addonAfter: 'px',
+                                name: ['marginBottom']
+                            }
+                        ]
+                    },
+                    {
+                        type: 'Group',
+                        label: '字体',
+                        child: [
+                            {
+                                type: 'Select',
+                                name: ['fontFamily-cn'],
+                                bottomText: '中文字体'
+                            },
+                            {
+                                type: 'Select',
+                                name: ['fontFamily-en'],
+                                bottomText: '英文/其他字体'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'Group',
+                        label: '',
+                        child: [
+                            {
+                                type: 'Color',
+                                name: ['color']
+                            },
+                            {
+                                type: 'Number',
+                                addonAfter: 'px',
+                                name: ['fontSize']
+                            }
+                        ]
+                    },
+                    {
+                        label: '样式',
+                        type: 'TextStyle'
+                    },
+                    {
+                        label: '对齐',
+                        type: 'TextAlign'
+                    },
+                    {
+                        label: '间距',
+                        type: 'TextSpace'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        title: '加购按钮样式',
+        child: [
+            {
+                label: '英文大小写',
+                type: 'Select',
+                name: ['props', 'buttonStyle', 'textTransform'],
+                options: [
+                    {
+                        label: '默认',
+                        value: 'unset'
+                    },
+                    {
+                        label: '小写',
+                        value: 'lowercase'
+                    },
+                    {
+                        label: '大写',
+                        value: 'uppercase'
+                    }
+                ]
+            },
+            {
+                type: 'Color',
+                label: '背景色',
+                name: ['props', 'buttonStyle', 'backgroundColor'],
+                initialValue: '#000'
+            },
+            {
+                type: 'Group',
+                label: '尺寸',
+                child: [
+                    {
+                        type: 'Number',
+                        name: ['props', 'buttonStyle', 'height'],
+                        addonAfter: 'H'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '圆角',
+                child: [
+                    {
+                        type: 'Slider',
+                        name: ['props', 'buttonStyle', 'borderRadius'],
+                        max: 100
+                    },
+                    {
+                        type: 'Number',
+                        name: ['props', 'buttonStyle', 'borderRadius'],
+                        addonAfter: 'px',
+                        max: 100
+                    }
+                ]
+            },
+            {
+                type: 'TextMargin',
+                name: ['props', 'buttonStyle']
+            },
+            {
+                type: 'Group',
+                label: '字体',
+                child: [
+                    {
+                        type: 'Select',
+                        name: ['props', 'buttonStyle', 'fontFamily-cn'],
+                        bottomText: '中文字体'
+                    },
+                    {
+                        type: 'Select',
+                        name: ['props', 'buttonStyle', 'fontFamily-en'],
+                        bottomText: '英文/其他字体'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '',
+                child: [
+                    {
+                        type: 'Color',
+                        name: ['props', 'buttonStyle', 'color'],
+                        initialValue: '#fff'
+                    },
+                    {
+                        type: 'Number',
+                        name: ['props', 'buttonStyle', 'fontSize'],
+                        addonAfter: 'px'
+                    }
+                ]
+            },
+            {
+                type: 'TextStyle',
+                name: ['props', 'buttonStyle']
+            },
+            {
+                type: 'TextAlign',
+                name: ['props', 'buttonStyle']
+            },
+            {
+                label: '间距',
+                type: 'TextSpace',
+                name: ['props', 'buttonStyle']
+            }
+        ]
+    },
+    {
+        title: '文案配置',
+        child: [
+            {
+                type: 'Input',
+                label: '加购按钮文案',
+                name: ['props', 'texts', 'addToCart'],
+                placeholder: 'Add to Cart'
+            },
+            {
+                type: 'Input',
+                label: '选择规格提示',
+                name: ['props', 'texts', 'selectOptions'],
+                placeholder: 'Please select options'
+            },
+            {
+                type: 'Input',
+                label: '加载文案',
+                name: ['props', 'texts', 'loading'],
+                placeholder: 'Loading...'
+            },
+            {
+                type: 'Input',
+                label: '错误文案',
+                name: ['props', 'texts', 'error'],
+                placeholder: 'Failed to load product'
+            }
+        ]
+    },
+    {
+        title: '数量选择器',
+        child: [
+            {
+                type: 'Number',
+                label: '按钮间距',
+                name: ['props', 'quantityStyle', 'gap'],
+                addonAfter: 'px',
+                initialValue: 12
+            }
+        ]
+    }
+];

package/es/materials/sxp/popup/CommodityDetail/index.d.ts

@@ -53,6 +53,8 @@ export interface ICommodityDetailProps {
     isTel?: boolean;
     iframeBgColor?: string;
     isActive?: boolean;
+    enableAddToCart?: boolean;
+    addToCartPopupId?: string;
 }
 declare const _default: React.NamedExoticComponent<ICommodityDetailProps>;
 export default _default;

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

@@ -15,8 +15,8 @@ import { getPriceText } from '../../../../core/utils/materials';
 import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
 const CommodityDetail = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
-    var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel, iframeBgColor, isActive = true } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel", "iframeBgColor", "isActive"]);
-    const { sxpParameter, popupDetailData, isPreview, bffFbReport, popupCurTimeRef, checkCommodityIndexRef, globalConfig, ctaEvent } = useSxpDataSource();
+    var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel, iframeBgColor, isActive = true, enableAddToCart = false, addToCartPopupId = '' } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel", "iframeBgColor", "isActive", "enableAddToCart", "addToCartPopupId"]);
+    const { sxpParameter, popupDetailData, isPreview, bffFbReport, popupCurTimeRef, checkCommodityIndexRef, globalConfig, ctaEvent, setPopupDetailData } = useSxpDataSource();
     const { jumpToWeb, productView } = useEventReport();
     const curTimeRef = useRef(null);
     const [showModal, setShowModal] = useState(false);
@@ -37,6 +37,23 @@ const CommodityDetail = (_a) => {
         cta = p === null || p === void 0 ? void 0 : p.bindCta;
     }
     const handleLink = (e) => {
+        if (enableAddToCart && addToCartPopupId) {
+            setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, data), { index: position }));
+            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                eventName: 'ClickCTA',
+                product: product ? [product] : undefined,
+                contentType: 'product',
+                data,
+                position,
+                cta_text: cta === null || cta === void 0 ? void 0 : cta.enTitle,
+                cta_action_type: 'open_internal_popup',
+                target_content_id: product === null || product === void 0 ? void 0 : product.itemId
+            });
+            if (typeof window !== 'undefined' && window.sxpPopup) {
+                window.sxpPopup(addToCartPopupId);
+            }
+            return;
+        }
         if (product === null || product === void 0 ? void 0 : product.link) {
             jumpToWeb(e, data, product, cta, position);
             if (!isPost) {
@@ -161,10 +178,11 @@ const CommodityDetail = (_a) => {
     };
     const renderBtn = () => {
         var _a, _b;
-        return (React.createElement(React.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("a", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', role: 'button', tabIndex: 0, onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle },
-            React.createElement("span", { dangerouslySetInnerHTML: {
-                    __html: setFontForText((_b = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _b !== void 0 ? _b : 'Purchase on Website', buttonStyle)
-                } })))));
+        return (React.createElement(React.Fragment, null,
+            React.createElement("a", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', role: 'button', tabIndex: 0, onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle },
+                React.createElement("span", { dangerouslySetInnerHTML: {
+                        __html: setFontForText((_b = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _b !== void 0 ? _b : 'Purchase on Website', buttonStyle)
+                    } }))));
     };
     const getStyle = useCallback((style) => {
         if (style === null || style === void 0 ? void 0 : style.lineClamp) {

package/es/materials/sxp/popup/CommodityDetail/settingRender.d.ts

@@ -270,5 +270,18 @@ declare const _default: ({
         addonAfter: string;
         initialValue?: undefined;
     })[];
+} | {
+    title: string;
+    child: ({
+        label: string;
+        type: string;
+        name: string[];
+        placeholder?: undefined;
+    } | {
+        label: string;
+        type: string;
+        name: string[];
+        placeholder: string;
+    })[];
 })[];
 export default _default;

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

@@ -396,5 +396,21 @@ export default [
                 name: ['props', 'enableFixedCloseButton']
             }
         ]
+    },
+    {
+        title: '加购功能',
+        child: [
+            {
+                label: '启用加购弹窗',
+                type: 'Switch',
+                name: ['props', 'enableAddToCart']
+            },
+            {
+                label: '加购弹窗ID',
+                type: 'Input',
+                name: ['props', 'addToCartPopupId'],
+                placeholder: '请输入加购弹窗的ID'
+            }
+        ]
     }
 ];

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

@@ -281,10 +281,10 @@ Made in Italy` })));
                         React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo), dangerouslySetInnerHTML: {
                                 __html: setFontForText((_2 = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _2 !== void 0 ? _2 : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
                             } }))),
-                (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("a", { "aria-label": (_3 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _3 !== void 0 ? _3 : 'Shop now', role: 'button', tabIndex: 0, onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
+                React.createElement("a", { "aria-label": (_3 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _3 !== void 0 ? _3 : 'Shop now', role: 'button', tabIndex: 0, onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
                     React.createElement("span", { dangerouslySetInnerHTML: {
                             __html: setFontForText((_4 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _4 !== void 0 ? _4 : 'Shop now', buttonStyle)
-                        } }))),
+                        } })),
                 productInfoText({ isPost }))),
         React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) },
             React.createElement("div", { style: { paddingTop: '34px' } }, productInfoText({ isPost: false }))),

package/es/materials/sxp/popup/index.d.ts

@@ -5,3 +5,4 @@ export * from './CommodityDetailDiroNew/material';
 export * from './CommodityList/material';
 export * from './Iframe/material';
 export * from './ConsentDetail/material';
+export * from './AddToCart/material';

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

@@ -5,3 +5,4 @@ export * from './CommodityDetailDiroNew/material';
 export * from './CommodityList/material';
 export * from './Iframe/material';
 export * from './ConsentDetail/material';
+export * from './AddToCart/material';

package/lib/core/components/SxpPageRender/index.d.ts

@@ -79,6 +79,8 @@ export interface ISxpPageRenderProps {
             expires?: number;
             enable?: boolean;
         };
+        shopifyDomain?: string;
+        storefrontAccessToken?: string;
     };
     descStyle?: CSSProperties;
     tipText?: {

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

@@ -12,7 +12,7 @@ export interface IEventTimeType {
     time: Date;
     target: EventTarget;
 }
-export type ICapiEventNameType = 'PageView' | 'ProductView' | 'ViewContent' | 'ClickCTA' | 'ContentSwipe' | 'Engagement' | 'ExitFeed';
+export type ICapiEventNameType = 'PageView' | 'ProductView' | 'ViewContent' | 'ClickCTA' | 'ContentSwipe' | 'Engagement' | 'ExitFeed' | 'AddToCart';
 export interface ISxpDataSourceContext {
     rtcList: RecItemType[];
     setRtcList?: React.Dispatch<React.SetStateAction<RecItemType[]>>;

package/lib/materials/sxp/popup/AddToCart/index.d.ts

@@ -0,0 +1,33 @@
+import { FC, CSSProperties } from 'react';
+import './index.less';
+export interface IAddToCartPopupProps {
+    style?: CSSProperties;
+    isActive?: boolean;
+    index?: number;
+    shopifyDomain?: string;
+    storefrontAccessToken?: string;
+    variantStyles?: {
+        title?: CSSProperties;
+        price?: CSSProperties;
+        option?: CSSProperties;
+        selectedOption?: CSSProperties;
+    };
+    buttonStyle?: CSSProperties;
+    quantityStyle?: CSSProperties;
+    texts?: {
+        addToCart?: string;
+        selectOptions?: string;
+        loading?: string;
+        error?: string;
+        color?: string;
+        size?: string;
+        material?: string;
+        style?: string;
+    };
+    popupBg?: {
+        horizontalMargin?: number;
+        bottomMargin?: number;
+    };
+}
+declare const AddToCartPopup: FC<IAddToCartPopupProps>;
+export default AddToCartPopup;