pb-sxp-ui 1.20.25 → 1.20.27

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

@@ -1,11 +1,11 @@
 import { __rest } from "tslib";
 import { css } from '@emotion/css';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import CommodityGroup from '../../template/components/CommodityGroup';
-import { useSxpDataSource } from '../../../../core/hooks';
-import './index.less';
 import { Autoplay, Pagination, Navigation, A11y, Mousewheel, Keyboard } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
+import CommodityGroup from '../../template/components/CommodityGroup';
+import AddToCartPopup from '../AddToCart';
+import { useSxpDataSource, useEditor } from '../../../../core/hooks';
 import Modal from '../../../../core/components/SxpPageRender/Modal';
 import ExpandableText from '../../../../core/components/SxpPageRender/ExpandableText';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
@@ -13,18 +13,17 @@ import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
 import { getScreenReader, setFontForText } from '../../../../core/utils/tool';
 import { getPriceText } from '../../../../core/utils/materials';
 import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
+import './index.less';
 const CommodityDetailDiroNew = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
-    var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel, iframeBgColor, isActive = true } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel", "iframeBgColor", "isActive"]);
-    const [spread, setSpread] = useState(true);
-    const { sxpParameter, popupCurTimeRef, popupDetailData, isPreview, bffFbReport, checkCommodityIndexRef, globalConfig, ctaEvent } = useSxpDataSource();
-    const { jumpToWeb, productView } = useEventReport();
-    const [stopSlide, setStopSlide] = useState(false);
-    const [isBottom, setIsBottom] = useState(false);
-    const [isTop, setIsTop] = useState(true);
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
+    var { style, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, iframeBgColor, isActive = true } = _a, props = __rest(_a, ["style", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "iframeBgColor", "isActive"]);
+    const { sxpParameter, popupCurTimeRef, popupDetailData, setPopupDetailData, isPreview, bffFbReport, checkCommodityIndexRef, globalConfig, ctaEvent } = useSxpDataSource();
+    useEditor();
+    const { productView } = useEventReport();
     const [showModal, setShowModal] = useState(false);
     const curTimeRef = useRef(null);
     const [show3DModal, setShow3DModal] = useState(false);
+    const [showAddToCart, setShowAddToCart] = useState(false);
     const [checkCommodityIndex, setCheckCommodityIndex] = useState((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
     const swiperRef = useRef();
     const [swiperActiveIndex, setSwiperActiveIndex] = useState(0);
@@ -41,30 +40,27 @@ const CommodityDetailDiroNew = (_a) => {
         cta = p === null || p === void 0 ? void 0 : p.bindCta;
     }
     const handleLink = (e) => {
-        if (product === null || product === void 0 ? void 0 : product.link) {
-            jumpToWeb(e, data, product, cta, position);
-            if (!isPost) {
-                productView(data, product, cta, viewTime || curTimeRef.current, position);
-            }
-            else {
-                ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
-                    eventSubject: 'clickCta',
-                    eventDescription: 'User clicked the CTA'
-                }, data, product, 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_external_link',
-                    target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
-                    target_url: product.link
-                });
-            }
-            window.location.href = window.getJointUtmLink(product.link);
+        e.preventDefault();
+        ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
+            eventSubject: 'clickCta',
+            eventDescription: 'User clicked the CTA'
+        }, data, product, 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,
+            target_url: product === null || product === void 0 ? void 0 : product.link
+        });
+        if (!isPost) {
+            productView(data, product, cta, viewTime || curTimeRef.current, position);
         }
+        setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, data), { video: Object.assign(Object.assign({}, data === null || data === void 0 ? void 0 : data.video), { bindProduct: product }), index: position }));
+        setShowAddToCart(true);
     };
     useEffect(() => {
         var _a, _b;
@@ -85,7 +81,7 @@ const CommodityDetailDiroNew = (_a) => {
             rec: recData,
             position
         });
-    }, [isActive, bffFbReport, isPost]);
+    }, [isActive, bffFbReport, isPost, data, product, position]);
     useEffect(() => {
         if (!isActive || isPost)
             return;
@@ -143,9 +139,6 @@ const CommodityDetailDiroNew = (_a) => {
     });
     const width = (isPreview ? 375 : (_u = style === null || style === void 0 ? void 0 : style.width) !== null && _u !== void 0 ? _u : window.innerWidth) - ((_v = popupBg === null || popupBg === void 0 ? void 0 : popupBg.horizontalMargin) !== null && _v !== void 0 ? _v : 0) * 2;
     const height = commodityImgRatio ? width * (commodityImgRatio.h / commodityImgRatio.w) : width;
-    const handleClickCollapse = () => {
-        setSpread(!spread);
-    };
     const productInfoText = ({ isPost }) => {
         return (React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
             React.createElement(ExpandableText, { isPost: isPost, onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
@@ -166,13 +159,13 @@ Made in Italy` })));
             swiperRef.current.swiper.slideTo(0);
             swiperRef.current.swiper.autoplay.start();
         }
-    }, []);
+    }, [popupCurTimeRef, checkCommodityIndexRef]);
     const renderCommodityGroup = useCallback(() => {
         var _a, _b, _c;
         if (isPost)
             return;
         return (React.createElement(CommodityGroup, { products: (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts, data: commodityGroup, defImg: (_c = (_b = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _b !== void 0 ? _b : bottom_image) !== null && _c !== void 0 ? _c : '', style: { padding: '0 19px' }, onCLick: handleClick, popupDetailData: popupDetailData, check: checkCommodityIndex }));
-    }, [checkCommodityIndex]);
+    }, [checkCommodityIndex, isPost, (_w = data === null || data === void 0 ? void 0 : data.video) === null || _w === void 0 ? void 0 : _w.bindProducts, commodityGroup, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image, bottom_image, handleClick, popupDetailData]);
     const getDotsAlign = useMemo(() => {
         const dotsAlignClass = {
             left: 'commondityDetail-swiper-clickable-left',
@@ -182,24 +175,24 @@ Made in Italy` })));
         return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
     }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
     const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
+    const isAlly = useMemo(() => getScreenReader(), []);
     const handleMouseEnter = useCallback(() => {
         if (swiperRef.current && swiperRef.current.swiper && isAlly) {
             swiperRef.current.swiper.autoplay.stop();
         }
-    }, []);
+    }, [isAlly]);
     const handleMouseLeave = useCallback(() => {
         if (swiperRef.current && swiperRef.current.swiper && isAlly) {
             swiperRef.current.swiper.autoplay.start();
         }
-    }, []);
+    }, [isAlly]);
     const handleSlideChange = useCallback((swiper) => {
         setSwiperActiveIndex(swiper.activeIndex);
     }, []);
-    const isAlly = useMemo(() => getScreenReader(), []);
     return (React.createElement("div", { className: 'pb-commondityDiroNew' },
         React.createElement("div", Object.assign({ className: css(Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' })) }, props),
             React.createElement("div", { style: { position: 'relative' }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
-                product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, Object.assign({ height: height, modules: [Pagination, Autoplay, ...(isAlly ? [Navigation, A11y, Mousewheel, Keyboard] : [])], pagination: {
+                product && ((_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.length) > 0 && (React.createElement(Swiper, Object.assign({ height: height, modules: [Pagination, Autoplay, ...(isAlly ? [Navigation, A11y, Mousewheel, Keyboard] : [])], pagination: {
                         clickable: true,
                         bulletActiveClass: 'swipe-item-active-bullet',
                         clickableClass: getDotsAlign,
@@ -216,7 +209,7 @@ Made in Italy` })));
                     : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, autoplay: {
                         delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
                     }, className: css(Object.assign(Object.assign({ '.swiper-pagination': {
-                            bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0,
+                            bottom: (_y = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _y !== void 0 ? _y : 0,
                             fontSize: '14px'
                         } }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
                         '.swiper-pagination-bullet': {
@@ -228,7 +221,7 @@ Made in Italy` })));
                             backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
                             opacity: 1
                         }
-                    }))) }), (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src, srcKey) => {
+                    }))) }), (_z = product === null || product === void 0 ? void 0 : product.homePage) === null || _z === void 0 ? void 0 : _z.map((src, srcKey) => {
                     var _a;
                     return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
                         React.createElement("div", { style: {
@@ -244,7 +237,7 @@ Made in Italy` })));
                                     objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
                                 }, src: (_a = src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _a !== void 0 ? _a : bottom_image }))));
                 }))),
-                !((_z = product === null || product === void 0 ? void 0 : product.homePage) === null || _z === void 0 ? void 0 : _z.length) && (React.createElement("div", { className: css({
+                !((_0 = product === null || product === void 0 ? void 0 : product.homePage) === null || _0 === void 0 ? void 0 : _0.length) && (React.createElement("div", { className: css({
                         height,
                         width
                     }) },
@@ -252,7 +245,7 @@ Made in Italy` })));
                             objectFit: 'cover',
                             width: '100%',
                             height: '100%'
-                        }), src: (_0 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _0 !== void 0 ? _0 : bottom_image, alt: 'pdp image' }))),
+                        }), src: (_1 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _1 !== void 0 ? _1 : bottom_image, alt: 'pdp image' }))),
                 (iframeUrl || !product) && iframeIcon && (React.createElement("div", { style: {
                         display: 'flex',
                         alignItems: 'center',
@@ -269,7 +262,7 @@ Made in Italy` })));
                 React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
                     React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
                         React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title), dangerouslySetInnerHTML: {
-                                __html: setFontForText((_1 = product === null || product === void 0 ? void 0 : product.title) !== null && _1 !== void 0 ? _1 : 'Large Dior Toujours BagLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
+                                __html: setFontForText((_2 = product === null || product === void 0 ? void 0 : product.title) !== null && _2 !== void 0 ? _2 : 'Large Dior Toujours BagLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
                             } }),
                         React.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection), dangerouslySetInnerHTML: {
                                 __html: setFontForText((product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage CalfskinLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
@@ -279,11 +272,11 @@ Made in Italy` })));
                                 __html: priceText !== null && priceText !== void 0 ? priceText : ''
                             } }),
                         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)
+                                __html: setFontForText((_3 = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _3 !== void 0 ? _3 : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
                             } }))),
-                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": (_4 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _4 !== void 0 ? _4 : '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)
+                            __html: setFontForText((_5 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _5 !== void 0 ? _5 : 'Shop now', buttonStyle)
                         } })),
                 productInfoText({ isPost }))),
         React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) },
@@ -295,6 +288,8 @@ Made in Italy` })));
                         height: 'calc(100% - 50px)',
                         marginTop: '50px',
                         border: 'none'
-                    } })))));
+                    } }))),
+        showAddToCart && (React.createElement(Modal, { visible: showAddToCart, padding: 0, isFullScreen: false, onClose: () => setShowAddToCart(false) },
+            React.createElement(AddToCartPopup, { isActive: true })))));
 };
 export default memo(CommodityDetailDiroNew);

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

@@ -61,6 +61,10 @@ export interface IApiResponse {
         productUserId?: string;
         multiCta?: IMultiCtaData;
         position?: number;
+        shopify?: {
+            domain: string;
+            storefrontAccessToken: string;
+        };
     };
 }
 export interface IStructurePageProps {

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

@@ -4,30 +4,14 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const hooks_1 = require("../../hooks");
 const FormatImage_1 = tslib_1.__importDefault(require("../SxpPageRender/FormatImage"));
+const _materials_ = tslib_1.__importStar(require("../../../materials/sxp"));
 const RESOLVER = {};
-try {
-    const materialsModule = require('../../materials/sxp');
-    if (materialsModule && typeof materialsModule === 'object') {
-        Object.values(materialsModule).forEach((v) => {
-            var _a;
-            if ((_a = v === null || v === void 0 ? void 0 : v.extend) === null || _a === void 0 ? void 0 : _a.type) {
-                RESOLVER[v.extend.type] = v;
-            }
-        });
-        if (Object.keys(RESOLVER).length > 0) {
-            console.log('[StructurePage] Successfully loaded materials:', Object.keys(RESOLVER));
-        }
-        else {
-            console.warn('[StructurePage] Materials module loaded but no valid components found');
-        }
-    }
-    else {
-        console.warn('[StructurePage] Materials module is not a valid object:', materialsModule);
+Object.values(_materials_).forEach((v) => {
+    var _a;
+    if ((_a = v === null || v === void 0 ? void 0 : v.extend) === null || _a === void 0 ? void 0 : _a.type) {
+        RESOLVER[v.extend.type] = v;
     }
-}
-catch (error) {
-    console.error('[StructurePage] Failed to load materials for StructurePage:', error);
-}
+});
 const baseStyles = {
     container: {
         backgroundColor: '#000',
@@ -541,7 +525,7 @@ const StructurePage = (_a) => {
             return res.json();
         })
             .then((result) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             if (result.code === '0' || result.code === '00000') {
                 let multiCtaData = null;
                 if (isCmsMode) {
@@ -557,6 +541,13 @@ const StructurePage = (_a) => {
                     console.error('[StructurePage] No multiCta data found in response:', result);
                     setError(result.message || 'No multiCta data found');
                 }
+                if ((_e = result.data) === null || _e === void 0 ? void 0 : _e.shopify) {
+                    window.__SHOPIFY_CONFIG__ = {
+                        domain: result.data.shopify.domain,
+                        storefrontAccessToken: result.data.shopify.storefrontAccessToken
+                    };
+                    console.log('[StructurePage] Shopify config stored:', window.__SHOPIFY_CONFIG__);
+                }
             }
             else {
                 setError(result.message || 'Failed to load data');

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

@@ -10,6 +10,7 @@ interface IModalProps {
     fullHeight?: number;
     isFullScreen?: boolean;
     openState?: IPopupType;
+    showCloseButton?: boolean;
 }
 declare const _default: React.NamedExoticComponent<React.PropsWithChildren<IModalProps>>;
 export default _default;

package/lib/core/components/SxpPageRender/Modal/index.js

@@ -7,7 +7,7 @@ const ReactDOM = tslib_1.__importStar(require("react-dom"));
 const hooks_1 = require("../../../../core/hooks");
 const useVisibleHeight_1 = require("../../../../core/hooks/useVisibleHeight");
 const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
-const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight, isFullScreen = false, openState }) => {
+const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight, isFullScreen = false, openState, showCloseButton = true }) => {
     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;
     const { visibleHeight, bottomHeight } = (0, useVisibleHeight_1.useVisibleHeight)();
     const touchRef = (0, react_1.useRef)(null);
@@ -181,7 +181,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
                         setScrollTop(15 - ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.scrollTop));
                     }
                 })), child()),
-                react_1.default.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
-                    react_1.default.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
+                showCloseButton && (react_1.default.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
+                    react_1.default.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close button', className: 'modal-icon' })))))))), modalEleRef.current);
 };
 exports.default = (0, react_1.memo)(Modal);

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

@@ -81,6 +81,7 @@ export interface ISxpPageRenderProps {
         };
         shopifyDomain?: string;
         storefrontAccessToken?: string;
+        popupList?: any[];
     };
     descStyle?: CSSProperties;
     tipText?: {

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

@@ -46,6 +46,7 @@ export type ProductInfoType = {
     taxInfo?: string;
     cover?: string;
     remark?: string;
+    shopifyId?: string;
 };
 export interface IScene {
     blueprintStep: number;

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

@@ -1,33 +1,7 @@
-import { FC, CSSProperties } from 'react';
+import { FC } 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;