pb-sxp-ui 1.20.25 → 1.20.27

package/lib/materials/sxp/popup/AddToCart/index.old.js

@@ -0,0 +1,301 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const hooks_1 = require("../../../../core/hooks");
+const useEventReport_1 = require("../../../../core/hooks/useEventReport");
+const tool_1 = require("../../../../core/utils/tool");
+require("./index.less");
+const AddToCartPopup = (_a) => {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var { style, isActive = true, index, shopifyDomain = '', storefrontAccessToken = '', variantStyles = {}, buttonStyle = {}, quantityStyle = {}, texts = {}, popupBg = {} } = _a, props = tslib_1.__rest(_a, ["style", "isActive", "index", "shopifyDomain", "storefrontAccessToken", "variantStyles", "buttonStyle", "quantityStyle", "texts", "popupBg"]);
+    const { sxpParameter, popupDetailData, isPreview, bffFbReport, globalConfig } = (0, hooks_1.useSxpDataSource)();
+    const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
+    const curTimeRef = (0, react_1.useRef)(null);
+    const [productData, setProductData] = (0, react_1.useState)(null);
+    const [selectedOptions, setSelectedOptions] = (0, react_1.useState)({});
+    const [selectedVariant, setSelectedVariant] = (0, react_1.useState)(null);
+    const [quantity, setQuantity] = (0, react_1.useState)(1);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const data = popupDetailData;
+    const product = (_f = (_c = (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct) !== null && _c !== void 0 ? _c : (_e = (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.bindProducts) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : data === null || data === void 0 ? void 0 : data.product;
+    const cta = product === null || product === void 0 ? void 0 : product.bindCta;
+    const position = (_h = (_g = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index) !== null && _g !== void 0 ? _g : index) !== null && _h !== void 0 ? _h : 0;
+    console.log('[AddToCartPopup] 组件挂载，数据:', {
+        popupDetailData,
+        'video.bindProduct': (_j = data === null || data === void 0 ? void 0 : data.video) === null || _j === void 0 ? void 0 : _j.bindProduct,
+        'video.bindProducts[0]': (_l = (_k = data === null || data === void 0 ? void 0 : data.video) === null || _k === void 0 ? void 0 : _k.bindProducts) === null || _l === void 0 ? void 0 : _l[0],
+        'data.product': data === null || data === void 0 ? void 0 : data.product,
+        product,
+        isActive
+    });
+    const shopifyConfig = window.__SHOPIFY_CONFIG__;
+    const finalShopifyDomain = shopifyDomain ||
+        (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.shopifyDomain) ||
+        (shopifyConfig === null || shopifyConfig === void 0 ? void 0 : shopifyConfig.domain) ||
+        'dev-store-749237498237498636.myshopify.com';
+    const finalStorefrontToken = storefrontAccessToken ||
+        (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.storefrontAccessToken) ||
+        (shopifyConfig === null || shopifyConfig === void 0 ? void 0 : shopifyConfig.storefrontAccessToken) ||
+        '77d894c490f79430ce7bd0a7efdff6b7';
+    const productId = (product === null || product === void 0 ? void 0 : product.shopifyId) || (product === null || product === void 0 ? void 0 : product.itemId) || '';
+    console.log('[AddToCartPopup] Shopify 配置:', {
+        productId,
+        finalShopifyDomain,
+        hasToken: !!finalStorefrontToken,
+        shopifyConfig
+    });
+    const finalTexts = {
+        addToCart: texts.addToCart || 'Add to Cart',
+        selectOptions: texts.selectOptions || 'Please select options',
+        loading: texts.loading || 'Loading...',
+        error: texts.error || 'Failed to load product',
+        color: texts.color || 'Color',
+        size: texts.size || 'Size',
+        material: texts.material || 'Material',
+        style: texts.style || 'Style'
+    };
+    const fetchProductData = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        var _r;
+        if (!productId || !finalShopifyDomain || !finalStorefrontToken) {
+            console.log('[AddToCartPopup] 缺少必要配置:', {
+                productId,
+                shopifyDomain: finalShopifyDomain,
+                hasToken: !!finalStorefrontToken
+            });
+            setLoading(false);
+            return;
+        }
+        console.log('[AddToCartPopup] 开始加载商品数据:', {
+            productId,
+            shopifyDomain: finalShopifyDomain
+        });
+        setLoading(true);
+        setError(null);
+        try {
+            const query = `
+        query getProduct($id: ID!) {
+          product(id: $id) {
+            id
+            title
+            images(first: 10) {
+              edges {
+                node {
+                  url
+                }
+              }
+            }
+            options {
+              name
+              values
+            }
+            variants(first: 100) {
+              edges {
+                node {
+                  id
+                  title
+                  availableForSale
+                  price {
+                    amount
+                    currencyCode
+                  }
+                  image {
+                    url
+                  }
+                  selectedOptions {
+                    name
+                    value
+                  }
+                }
+              }
+            }
+          }
+        }
+      `;
+            const formattedProductId = productId.startsWith('gid://')
+                ? productId
+                : `gid://shopify/Product/${productId}`;
+            console.log('[AddToCartPopup] 使用的 Product ID:', formattedProductId);
+            const response = yield fetch(`https://${finalShopifyDomain}/api/2024-01/graphql.json`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-Shopify-Storefront-Access-Token': finalStorefrontToken
+                },
+                body: JSON.stringify({
+                    query,
+                    variables: { id: formattedProductId }
+                })
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}`);
+            }
+            const result = yield response.json();
+            if (result.errors) {
+                console.error('[AddToCartPopup] GraphQL 错误:', result.errors);
+                throw new Error(result.errors[0].message);
+            }
+            if (!((_r = result.data) === null || _r === void 0 ? void 0 : _r.product)) {
+                console.error('[AddToCartPopup] 未找到商品');
+                throw new Error('Product not found');
+            }
+            console.log('[AddToCartPopup] 商品数据加载成功:', result.data.product.title);
+            setProductData(result.data.product);
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : finalTexts.error;
+            setError(errorMessage);
+            console.error('[AddToCartPopup] 加载失败:', err);
+        }
+        finally {
+            setLoading(false);
+        }
+    }), [productId, finalShopifyDomain, finalStorefrontToken, finalTexts.error]);
+    (0, react_1.useEffect)(() => {
+        if (isActive) {
+            fetchProductData();
+        }
+    }, [isActive, fetchProductData]);
+    (0, react_1.useEffect)(() => {
+        if (!productData)
+            return;
+        const variants = productData.variants.edges.map(edge => edge.node);
+        const optionsCount = productData.options.length;
+        const selectedCount = Object.keys(selectedOptions).length;
+        if (selectedCount === 0 || selectedCount < optionsCount) {
+            setSelectedVariant(null);
+            return;
+        }
+        const matchedVariant = variants.find(variant => {
+            return variant.selectedOptions.every(option => selectedOptions[option.name] === option.value);
+        });
+        setSelectedVariant(matchedVariant || null);
+        setQuantity(1);
+    }, [selectedOptions, productData]);
+    const handleOptionSelect = (0, react_1.useCallback)((optionName, value) => {
+        setSelectedOptions(prev => {
+            const newOptions = Object.assign({}, prev);
+            if (newOptions[optionName] === value) {
+                delete newOptions[optionName];
+            }
+            else {
+                newOptions[optionName] = value;
+            }
+            return newOptions;
+        });
+    }, []);
+    const handleQuantityChange = (0, react_1.useCallback)((delta) => {
+        setQuantity(prev => {
+            var _a;
+            const newQuantity = prev + delta;
+            const maxQuantity = (_a = selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.quantityAvailable) !== null && _a !== void 0 ? _a : 999;
+            return Math.max(1, Math.min(newQuantity, maxQuantity));
+        });
+    }, [selectedVariant]);
+    const isOptionValueAvailable = (0, react_1.useCallback)((optionName, value) => {
+        if (!productData)
+            return false;
+        const variants = productData.variants.edges.map(edge => edge.node);
+        const tempOptions = Object.assign(Object.assign({}, selectedOptions), { [optionName]: value });
+        return variants.some(variant => {
+            const matches = variant.selectedOptions.every(option => !tempOptions[option.name] || tempOptions[option.name] === option.value);
+            const hasStock = variant.quantityAvailable === null || variant.quantityAvailable > 0;
+            return matches && variant.availableForSale && hasStock;
+        });
+    }, [productData, selectedOptions]);
+    const handleAddToCart = (0, react_1.useCallback)(() => {
+        var _a;
+        if (!selectedVariant || quantity === 0)
+            return;
+        const variantId = selectedVariant.id.split('/').pop();
+        const cartUrl = `https://${finalShopifyDomain}/cart/add?id=${variantId}&quantity=${quantity}`;
+        console.log('[AddToCartPopup] 加购:', {
+            variantId,
+            quantity,
+            cartUrl
+        });
+        bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+            eventName: 'AddToCart',
+            product: product ? [product] : undefined,
+            contentType: 'product',
+            data,
+            position,
+            content_id: (_a = product === null || product === void 0 ? void 0 : product.itemId) !== null && _a !== void 0 ? _a : '',
+            value: parseFloat(selectedVariant.price.amount) * quantity,
+            currency: selectedVariant.price.currencyCode,
+            contents: [{
+                    id: variantId,
+                    quantity
+                }]
+        });
+        window.location.href = cartUrl;
+    }, [selectedVariant, quantity, finalShopifyDomain, bffFbReport, product, data, position]);
+    const totalPrice = (0, react_1.useMemo)(() => {
+        if (!selectedVariant)
+            return null;
+        const price = parseFloat(selectedVariant.price.amount);
+        const total = price * quantity;
+        return total.toFixed(2);
+    }, [selectedVariant, quantity]);
+    (0, react_1.useEffect)(() => {
+        const initTime = () => {
+            curTimeRef.current = new Date();
+        };
+        initTime();
+        window.addEventListener('pageshow', initTime);
+        return () => {
+            window.removeEventListener('pageshow', initTime);
+        };
+    }, []);
+    if (loading) {
+        return (react_1.default.createElement("div", { className: "add-to-cart-popup-loading", style: style },
+            react_1.default.createElement("div", null, finalTexts.loading)));
+    }
+    if (error || !productData) {
+        return (react_1.default.createElement("div", { className: "add-to-cart-popup-error", style: style },
+            react_1.default.createElement("div", null,
+                finalTexts.error,
+                ": ",
+                error || 'Product not found')));
+    }
+    const mainImage = ((_m = selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.image) === null || _m === void 0 ? void 0 : _m.url) || ((_o = productData.images.edges[0]) === null || _o === void 0 ? void 0 : _o.node.url) || ((_p = product === null || product === void 0 ? void 0 : product.homePage) === null || _p === void 0 ? void 0 : _p[0]) || '';
+    const hasAllOptionsSelected = productData.options.length === Object.keys(selectedOptions).length;
+    const isAddToCartDisabled = !selectedVariant || quantity === 0;
+    return (react_1.default.createElement("div", Object.assign({ className: "add-to-cart-popup-container", style: style }, props),
+        react_1.default.createElement("div", { className: "variant-detail-section" },
+            react_1.default.createElement("div", { className: "variant-image-wrapper" },
+                react_1.default.createElement("img", { src: mainImage, alt: productData.title, className: "variant-image" })),
+            react_1.default.createElement("div", { className: "variant-info-wrapper" },
+                react_1.default.createElement("h2", { className: "product-title-text", style: variantStyles.title, dangerouslySetInnerHTML: {
+                        __html: (0, tool_1.setFontForText)(productData.title, variantStyles.title)
+                    } }),
+                selectedVariant && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("div", { className: "selected-options-tags" }, selectedVariant.selectedOptions.map(option => (react_1.default.createElement("span", { key: option.name, className: "option-tag", style: variantStyles.selectedOption },
+                        option.name,
+                        ": ",
+                        option.value)))),
+                    react_1.default.createElement("div", { className: "price-display" },
+                        react_1.default.createElement("span", { className: "price-value", style: variantStyles.price, dangerouslySetInnerHTML: {
+                                __html: (0, tool_1.setFontForText)(`${selectedVariant.price.currencyCode} $${totalPrice}`, variantStyles.price)
+                            } })),
+                    react_1.default.createElement("div", { className: "quantity-selector-wrapper", style: quantityStyle },
+                        react_1.default.createElement("button", { className: "quantity-btn quantity-decrease", onClick: () => handleQuantityChange(-1), disabled: quantity <= 1, "aria-label": "Decrease quantity" }, "-"),
+                        react_1.default.createElement("input", { type: "number", value: quantity, readOnly: true, className: "quantity-input-field", "aria-label": "Quantity" }),
+                        react_1.default.createElement("button", { className: "quantity-btn quantity-increase", onClick: () => handleQuantityChange(1), disabled: quantity >= ((_q = selectedVariant.quantityAvailable) !== null && _q !== void 0 ? _q : 999), "aria-label": "Increase quantity" }, "+")))),
+                !hasAllOptionsSelected && (react_1.default.createElement("div", { className: "no-selection-hint", style: variantStyles.option }, finalTexts.selectOptions)))),
+        react_1.default.createElement("div", { className: "variant-options-section" }, productData.options.map(option => (react_1.default.createElement("div", { key: option.name, className: "option-group-wrapper" },
+            react_1.default.createElement("h3", { className: "option-group-name", style: variantStyles.option, dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)(option.name, variantStyles.option)
+                } }),
+            react_1.default.createElement("div", { className: "option-values-grid" }, option.values.map(value => {
+                const isSelected = selectedOptions[option.name] === value;
+                const isAvailable = isOptionValueAvailable(option.name, value);
+                return (react_1.default.createElement("button", { key: value, className: `option-value-button ${isSelected ? 'selected' : ''} ${!isAvailable ? 'disabled' : ''}`, onClick: () => isAvailable && handleOptionSelect(option.name, value), disabled: !isAvailable, "aria-label": `${option.name}: ${value}`, "aria-pressed": isSelected }, value));
+            })))))),
+        react_1.default.createElement("button", { className: `add-to-cart-button ${isAddToCartDisabled ? 'disabled' : ''}`, style: buttonStyle, onClick: handleAddToCart, disabled: isAddToCartDisabled, "aria-label": finalTexts.addToCart },
+            react_1.default.createElement("span", { dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)(finalTexts.addToCart, buttonStyle)
+                } }))));
+};
+exports.default = AddToCartPopup;

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

@@ -16,60 +16,7 @@ const AddToCartPopup = (0, create_1.createMaterial)(_1.default, {
         interactionRender: interactionRender_1.default
     },
     defaulSetting: {
-        props: {
-            shopifyDomain: '',
-            storefrontAccessToken: '',
-            variantStyles: {
-                title: {
-                    color: '#000',
-                    fontSize: 20,
-                    fontWeight: 600,
-                    marginBottom: 12
-                },
-                price: {
-                    color: '#000',
-                    fontSize: 24,
-                    fontWeight: 700,
-                    marginBottom: 16
-                },
-                option: {
-                    color: '#111',
-                    fontSize: 16,
-                    fontWeight: 600,
-                    marginBottom: 12
-                },
-                selectedOption: {
-                    fontSize: 14,
-                    color: '#374151'
-                }
-            },
-            buttonStyle: {
-                backgroundColor: '#000',
-                color: '#fff',
-                fontSize: 16,
-                height: 52,
-                fontWeight: 600,
-                textAlign: 'center',
-                textTransform: 'uppercase'
-            },
-            quantityStyle: {
-                gap: 12
-            },
-            texts: {
-                addToCart: 'Add to Cart',
-                selectOptions: 'Please select options',
-                loading: 'Loading...',
-                error: 'Failed to load product',
-                color: 'Color',
-                size: 'Size',
-                material: 'Material',
-                style: 'Style'
-            },
-            popupBg: {
-                horizontalMargin: 0,
-                bottomMargin: 0
-            }
-        },
+        props: {},
         style: {}
     },
     w: 100,

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

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const css_1 = require("@emotion/css");
 const react_1 = tslib_1.__importStar(require("react"));
-const CommodityGroup_1 = tslib_1.__importDefault(require("../../template/components/CommodityGroup"));
-const hooks_1 = require("../../../../core/hooks");
-require("./index.less");
 const modules_1 = require("swiper/modules");
 const react_2 = require("swiper/react");
+const CommodityGroup_1 = tslib_1.__importDefault(require("../../template/components/CommodityGroup"));
+const AddToCart_1 = tslib_1.__importDefault(require("../AddToCart"));
+const hooks_1 = require("../../../../core/hooks");
 const Modal_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/Modal"));
 const ExpandableText_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/ExpandableText"));
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
@@ -15,18 +15,17 @@ const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/componen
 const tool_1 = require("../../../../core/utils/tool");
 const materials_1 = require("../../../../core/utils/materials");
 const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
+require("./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 = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel", "iframeBgColor", "isActive"]);
-    const [spread, setSpread] = (0, react_1.useState)(true);
-    const { sxpParameter, popupCurTimeRef, popupDetailData, isPreview, bffFbReport, checkCommodityIndexRef, globalConfig, ctaEvent } = (0, hooks_1.useSxpDataSource)();
-    const { jumpToWeb, productView } = (0, useEventReport_1.useEventReport)();
-    const [stopSlide, setStopSlide] = (0, react_1.useState)(false);
-    const [isBottom, setIsBottom] = (0, react_1.useState)(false);
-    const [isTop, setIsTop] = (0, react_1.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 = tslib_1.__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 } = (0, hooks_1.useSxpDataSource)();
+    (0, hooks_1.useEditor)();
+    const { productView } = (0, useEventReport_1.useEventReport)();
     const [showModal, setShowModal] = (0, react_1.useState)(false);
     const curTimeRef = (0, react_1.useRef)(null);
     const [show3DModal, setShow3DModal] = (0, react_1.useState)(false);
+    const [showAddToCart, setShowAddToCart] = (0, react_1.useState)(false);
     const [checkCommodityIndex, setCheckCommodityIndex] = (0, react_1.useState)((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
     const swiperRef = (0, react_1.useRef)();
     const [swiperActiveIndex, setSwiperActiveIndex] = (0, react_1.useState)(0);
@@ -43,30 +42,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);
     };
     (0, react_1.useEffect)(() => {
         var _a, _b;
@@ -87,7 +83,7 @@ const CommodityDetailDiroNew = (_a) => {
             rec: recData,
             position
         });
-    }, [isActive, bffFbReport, isPost]);
+    }, [isActive, bffFbReport, isPost, data, product, position]);
     (0, react_1.useEffect)(() => {
         if (!isActive || isPost)
             return;
@@ -145,9 +141,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_1.default.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
             react_1.default.createElement(ExpandableText_1.default, { 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) ||
@@ -168,13 +161,13 @@ Made in Italy` })));
             swiperRef.current.swiper.slideTo(0);
             swiperRef.current.swiper.autoplay.start();
         }
-    }, []);
+    }, [popupCurTimeRef, checkCommodityIndexRef]);
     const renderCommodityGroup = (0, react_1.useCallback)(() => {
         var _a, _b, _c;
         if (isPost)
             return;
         return (react_1.default.createElement(CommodityGroup_1.default, { 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 = (0, react_1.useMemo)(() => {
         const dotsAlignClass = {
             left: 'commondityDetail-swiper-clickable-left',
@@ -184,24 +177,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 = (0, react_1.useMemo)(() => (0, tool_1.getScreenReader)(), []);
     const handleMouseEnter = (0, react_1.useCallback)(() => {
         if (swiperRef.current && swiperRef.current.swiper && isAlly) {
             swiperRef.current.swiper.autoplay.stop();
         }
-    }, []);
+    }, [isAlly]);
     const handleMouseLeave = (0, react_1.useCallback)(() => {
         if (swiperRef.current && swiperRef.current.swiper && isAlly) {
             swiperRef.current.swiper.autoplay.start();
         }
-    }, []);
+    }, [isAlly]);
     const handleSlideChange = (0, react_1.useCallback)((swiper) => {
         setSwiperActiveIndex(swiper.activeIndex);
     }, []);
-    const isAlly = (0, react_1.useMemo)(() => (0, tool_1.getScreenReader)(), []);
     return (react_1.default.createElement("div", { className: 'pb-commondityDiroNew' },
         react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' })) }, props),
             react_1.default.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_1.default.createElement(react_2.Swiper, Object.assign({ height: height, modules: [modules_1.Pagination, modules_1.Autoplay, ...(isAlly ? [modules_1.Navigation, modules_1.A11y, modules_1.Mousewheel, modules_1.Keyboard] : [])], pagination: {
+                product && ((_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.length) > 0 && (react_1.default.createElement(react_2.Swiper, Object.assign({ height: height, modules: [modules_1.Pagination, modules_1.Autoplay, ...(isAlly ? [modules_1.Navigation, modules_1.A11y, modules_1.Mousewheel, modules_1.Keyboard] : [])], pagination: {
                         clickable: true,
                         bulletActiveClass: 'swipe-item-active-bullet',
                         clickableClass: getDotsAlign,
@@ -218,7 +211,7 @@ Made in Italy` })));
                     : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, autoplay: {
                         delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
                     }, className: (0, css_1.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': {
@@ -230,7 +223,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_1.default.createElement(react_2.SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
                         react_1.default.createElement("div", { style: {
@@ -246,7 +239,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_1.default.createElement("div", { className: (0, css_1.css)({
+                !((_0 = product === null || product === void 0 ? void 0 : product.homePage) === null || _0 === void 0 ? void 0 : _0.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
                         height,
                         width
                     }) },
@@ -254,7 +247,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_1.default.createElement("div", { style: {
                         display: 'flex',
                         alignItems: 'center',
@@ -271,7 +264,7 @@ Made in Italy` })));
                 react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
                     react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
                         react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title), dangerouslySetInnerHTML: {
-                                __html: (0, tool_1.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: (0, tool_1.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_1.default.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: (0, tool_1.setFontForText)((product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage CalfskinLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
@@ -281,11 +274,11 @@ Made in Italy` })));
                                 __html: priceText !== null && priceText !== void 0 ? priceText : ''
                             } }),
                         react_1.default.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: (0, tool_1.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: (0, tool_1.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_1.default.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_1.default.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_1.default.createElement("span", { dangerouslySetInnerHTML: {
-                            __html: (0, tool_1.setFontForText)((_4 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _4 !== void 0 ? _4 : 'Shop now', buttonStyle)
+                            __html: (0, tool_1.setFontForText)((_5 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _5 !== void 0 ? _5 : 'Shop now', buttonStyle)
                         } })),
                 productInfoText({ isPost }))),
         react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) },
@@ -297,6 +290,8 @@ Made in Italy` })));
                         height: 'calc(100% - 50px)',
                         marginTop: '50px',
                         border: 'none'
-                    } })))));
+                    } }))),
+        showAddToCart && (react_1.default.createElement(Modal_1.default, { visible: showAddToCart, padding: 0, isFullScreen: false, onClose: () => setShowAddToCart(false) },
+            react_1.default.createElement(AddToCart_1.default, { isActive: true })))));
 };
 exports.default = (0, react_1.memo)(CommodityDetailDiroNew);

package/package.json

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