pb-sxp-ui 1.20.26 → 1.20.27

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

@@ -3,53 +3,31 @@ 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");
+const Modal_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/Modal"));
 require("./index.less");
-const AddToCartPopup = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    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 AddToCartPopup = ({ isActive = true }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const { popupDetailData, globalConfig } = (0, hooks_1.useSxpDataSource)();
     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 [showImagePreview, setShowImagePreview] = (0, react_1.useState)(false);
+    const [previewImageUrl, setPreviewImageUrl] = (0, react_1.useState)('');
     const data = popupDetailData;
-    const product = (_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];
-    const cta = product === null || product === void 0 ? void 0 : product.bindCta;
-    const position = (_g = (_f = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index) !== null && _f !== void 0 ? _f : index) !== null && _g !== void 0 ? _g : 0;
-    const finalShopifyDomain = shopifyDomain || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.shopifyDomain) || 'dev-store-749237498237498636.myshopify.com';
-    const finalStorefrontToken = storefrontAccessToken || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.storefrontAccessToken) || '77d894c490f79430ce7bd0a7efdff6b7';
-    const productId = (product === null || product === void 0 ? void 0 : product.itemId) || '';
-    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 product = (_e = (_b = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProducts) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : data === null || data === void 0 ? void 0 : data.product;
+    const shopifyConfig = window.__SHOPIFY_CONFIG__;
+    const shopifyDomain = ((_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.shopify) === null || _f === void 0 ? void 0 : _f.domain) || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.shopifyDomain) || (shopifyConfig === null || shopifyConfig === void 0 ? void 0 : shopifyConfig.domain) || 'dev-store-749237498237498636.myshopify.com';
+    const storefrontToken = ((_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.shopify) === null || _g === void 0 ? void 0 : _g.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) || '';
     const fetchProductData = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        var _m;
-        if (!productId || !finalShopifyDomain || !finalStorefrontToken) {
-            console.log('[AddToCartPopup] 缺少必要配置:', {
-                productId,
-                shopifyDomain: finalShopifyDomain,
-                hasToken: !!finalStorefrontToken
-            });
+        var _k;
+        if (!productId || !shopifyDomain || !storefrontToken) {
             setLoading(false);
             return;
         }
-        console.log('[AddToCartPopup] 开始加载商品数据:', {
-            productId,
-            shopifyDomain: finalShopifyDomain
-        });
         setLoading(true);
         setError(null);
         try {
@@ -93,45 +71,34 @@ const AddToCartPopup = (_a) => {
           }
         }
       `;
-            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`, {
+            const fullProductId = productId.startsWith('gid://') ? productId : `gid://shopify/Product/${productId}`;
+            const response = yield fetch(`https://${shopifyDomain}/api/2024-01/graphql.json`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
-                    'X-Shopify-Storefront-Access-Token': finalStorefrontToken
+                    'X-Shopify-Storefront-Access-Token': storefrontToken
                 },
                 body: JSON.stringify({
                     query,
-                    variables: { id: formattedProductId }
+                    variables: { id: fullProductId }
                 })
             });
-            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 (!((_m = result.data) === null || _m === void 0 ? void 0 : _m.product)) {
-                console.error('[AddToCartPopup] 未找到商品');
-                throw new Error('Product not found');
-            }
-            console.log('[AddToCartPopup] 商品数据加载成功:', result.data.product.title);
+            console.log('[AddToCart] Shopify Product Data:', result.data.product);
+            console.log('[AddToCart] Options:', (_k = result.data.product) === null || _k === void 0 ? void 0 : _k.options);
             setProductData(result.data.product);
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : finalTexts.error;
-            setError(errorMessage);
+            setError(err instanceof Error ? err.message : 'Failed to load product');
             console.error('[AddToCartPopup] 加载失败:', err);
         }
         finally {
             setLoading(false);
         }
-    }), [productId, finalShopifyDomain, finalStorefrontToken, finalTexts.error]);
+    }), [productId, shopifyDomain, storefrontToken]);
     (0, react_1.useEffect)(() => {
         if (isActive) {
             fetchProductData();
@@ -148,134 +115,111 @@ const AddToCartPopup = (_a) => {
             return;
         }
         const matchedVariant = variants.find(variant => {
-            return variant.selectedOptions.every(option => selectedOptions[option.name] === option.value);
+            return variant.selectedOptions.every(option => {
+                return selectedOptions[option.name] === option.value;
+            });
         });
         setSelectedVariant(matchedVariant || null);
-        setQuantity(1);
+        if ((matchedVariant === null || matchedVariant === void 0 ? void 0 : matchedVariant.quantityAvailable) !== undefined && matchedVariant.quantityAvailable > 0) {
+            setQuantity(prev => Math.min(prev, matchedVariant.quantityAvailable));
+        }
     }, [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)
+    const handleOptionSelect = (optionName, value) => {
+        setSelectedOptions(prev => (Object.assign(Object.assign({}, prev), { [optionName]: value })));
+    };
+    const handleAddToCart = () => {
+        if (!selectedVariant) {
+            alert('Please select all options');
             return;
-        const variantId = selectedVariant.id.split('/').pop();
-        const cartUrl = `https://${finalShopifyDomain}/cart/add?id=${variantId}&quantity=${quantity}`;
-        console.log('[AddToCartPopup] 加购:', {
+        }
+        const variantId = selectedVariant.id.replace('gid://shopify/ProductVariant/', '');
+        console.log('[AddToCart] 添加到购物车:', {
             variantId,
             quantity,
-            cartUrl
+            shopifyDomain,
+            selectedVariant
         });
-        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
-                }]
+        const params = new URLSearchParams({
+            id: variantId,
+            quantity: quantity.toString()
         });
+        const cartUrl = `https://${shopifyDomain}/cart/add?${params.toString()}`;
+        console.log('[AddToCart] 跳转到购物车 URL:', cartUrl);
         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);
-        };
-    }, []);
+    };
+    const totalPrice = selectedVariant
+        ? (parseFloat(selectedVariant.price.amount) * quantity).toFixed(2)
+        : '0.00';
     if (loading) {
-        return (react_1.default.createElement("div", { className: "add-to-cart-popup-loading", style: style },
-            react_1.default.createElement("div", null, finalTexts.loading)));
+        return (react_1.default.createElement("div", { className: 'add-to-cart-popup' },
+            react_1.default.createElement("div", { className: 'loading' }, "Loading...")));
+    }
+    if (error) {
+        return (react_1.default.createElement("div", { className: 'add-to-cart-popup' },
+            react_1.default.createElement("div", { className: 'error' }, error)));
     }
-    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')));
+    if (!productData) {
+        return null;
     }
-    const mainImage = ((_h = selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.image) === null || _h === void 0 ? void 0 : _h.url) || ((_j = productData.images.edges[0]) === null || _j === void 0 ? void 0 : _j.node.url) || ((_k = product === null || product === void 0 ? void 0 : product.homePage) === null || _k === void 0 ? void 0 : _k[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 >= ((_l = selectedVariant.quantityAvailable) !== null && _l !== void 0 ? _l : 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)
-                } }))));
+    const mainImage = ((_h = productData.images.edges[0]) === null || _h === void 0 ? void 0 : _h.node.url) || '';
+    const variantImage = ((_j = selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.image) === null || _j === void 0 ? void 0 : _j.url) || mainImage;
+    const maxQuantity = (selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.quantityAvailable) || 999;
+    return (react_1.default.createElement("div", { className: 'add-to-cart-popup' },
+        react_1.default.createElement("div", { className: 'popup-content' },
+            react_1.default.createElement("div", { className: 'product-header' },
+                react_1.default.createElement("div", { className: 'product-title' }, productData.title)),
+            react_1.default.createElement("div", { className: 'variant-detail' },
+                react_1.default.createElement("div", { className: 'variant-image-container', onClick: () => {
+                        if (variantImage) {
+                            setPreviewImageUrl(variantImage);
+                            setShowImagePreview(true);
+                        }
+                    }, style: { cursor: 'pointer' } },
+                    react_1.default.createElement("img", { src: variantImage, alt: 'Selected variant', className: 'variant-image' })),
+                react_1.default.createElement("div", { className: 'variant-info' },
+                    react_1.default.createElement("div", { className: 'variant-specs-row' },
+                        react_1.default.createElement("div", { className: 'variant-specs' }, Object.keys(selectedOptions).length > 0 ? (Object.entries(selectedOptions).map(([key, value]) => (react_1.default.createElement("span", { key: key, className: 'spec-item' }, value)))) : (react_1.default.createElement("span", { className: 'spec-placeholder' }, "Please select options"))),
+                        selectedVariant && selectedVariant.quantityAvailable !== undefined && (react_1.default.createElement("div", { className: 'stock-info' },
+                            "Available: ",
+                            selectedVariant.quantityAvailable))),
+                    react_1.default.createElement("div", { className: 'variant-price-row' },
+                        react_1.default.createElement("div", { className: 'price' },
+                            "$",
+                            totalPrice),
+                        react_1.default.createElement("div", { className: 'quantity-selector' },
+                            react_1.default.createElement("button", { className: 'qty-btn', onClick: () => setQuantity(Math.max(1, quantity - 1)), disabled: quantity <= 1 }, "\u2212"),
+                            react_1.default.createElement("span", { className: 'qty-value' }, quantity),
+                            react_1.default.createElement("button", { className: 'qty-btn', onClick: () => setQuantity(quantity + 1), disabled: !selectedVariant || quantity >= maxQuantity }, "+"))))),
+            react_1.default.createElement("div", { className: 'variant-options' }, productData.options.map(option => (react_1.default.createElement("div", { key: option.name, className: 'option-group' },
+                react_1.default.createElement("div", { className: 'option-label' }, option.name),
+                react_1.default.createElement("div", { className: 'option-values' }, option.values.map(value => {
+                    const isAvailable = productData.variants.edges.some(({ node: variant }) => {
+                        const hasThisOption = variant.selectedOptions.some(opt => opt.name === option.name && opt.value === value);
+                        if (!hasThisOption || !variant.availableForSale)
+                            return false;
+                        if (variant.quantityAvailable !== undefined) {
+                            return variant.quantityAvailable > 0;
+                        }
+                        return true;
+                    });
+                    const isSelected = selectedOptions[option.name] === value;
+                    return (react_1.default.createElement("button", { key: value, className: `option-btn ${isSelected ? 'selected' : ''} ${!isAvailable ? 'disabled' : ''}`, onClick: () => isAvailable && handleOptionSelect(option.name, value), disabled: !isAvailable }, value));
+                }))))))),
+        react_1.default.createElement("div", { className: 'popup-footer' },
+            react_1.default.createElement("button", { className: 'add-to-cart-btn', onClick: handleAddToCart, disabled: !selectedVariant }, "Add To Cart")),
+        showImagePreview && previewImageUrl && (react_1.default.createElement(Modal_1.default, { visible: showImagePreview, padding: 0, isFullScreen: true, onClose: () => setShowImagePreview(false) },
+            react_1.default.createElement("div", { style: {
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor: 'rgba(0, 0, 0, 0.9)'
+                }, onClick: () => setShowImagePreview(false) },
+                react_1.default.createElement("img", { src: previewImageUrl, alt: 'Preview', style: {
+                        maxWidth: '100%',
+                        maxHeight: '100%',
+                        objectFit: 'contain'
+                    } }))))));
 };
 exports.default = AddToCartPopup;

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import './index.less';
+export interface IAddToCartPopupProps {
+    isActive?: boolean;
+    onClose?: () => void;
+}
+declare const AddToCartPopup: FC<IAddToCartPopupProps>;
+export default AddToCartPopup;

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

@@ -0,0 +1,176 @@
+"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");
+require("./index.less");
+const AddToCartPopup = ({ isActive = true, onClose }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { popupDetailData, globalConfig } = (0, hooks_1.useSxpDataSource)();
+    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 = (_e = (_b = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProducts) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : data === null || data === void 0 ? void 0 : data.product;
+    const shopifyConfig = window.__SHOPIFY_CONFIG__;
+    const 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 storefrontToken = (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) || '';
+    const fetchProductData = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        if (!productId || !shopifyDomain || !storefrontToken) {
+            setLoading(false);
+            return;
+        }
+        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 fullProductId = productId.startsWith('gid://') ? productId : `gid://shopify/Product/${productId}`;
+            const response = yield fetch(`https://${shopifyDomain}/api/2024-01/graphql.json`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-Shopify-Storefront-Access-Token': storefrontToken
+                },
+                body: JSON.stringify({
+                    query,
+                    variables: { id: fullProductId }
+                })
+            });
+            const result = yield response.json();
+            if (result.errors) {
+                throw new Error(result.errors[0].message);
+            }
+            setProductData(result.data.product);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to load product');
+            console.error('[AddToCartPopup] 加载失败:', err);
+        }
+        finally {
+            setLoading(false);
+        }
+    }), [productId, shopifyDomain, storefrontToken]);
+    (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 => {
+                return selectedOptions[option.name] === option.value;
+            });
+        });
+        setSelectedVariant(matchedVariant || null);
+    }, [selectedOptions, productData]);
+    const handleOptionSelect = (optionName, value) => {
+        setSelectedOptions(prev => (Object.assign(Object.assign({}, prev), { [optionName]: value })));
+    };
+    const handleAddToCart = () => {
+        if (!selectedVariant) {
+            alert('Please select all options');
+            return;
+        }
+        const variantId = selectedVariant.id.split('/').pop();
+        const checkoutUrl = `https://${shopifyDomain}/cart/${variantId}:${quantity}`;
+        window.location.href = checkoutUrl;
+    };
+    const totalPrice = selectedVariant
+        ? (parseFloat(selectedVariant.price.amount) * quantity).toFixed(2)
+        : '0.00';
+    const currency = (selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.price.currencyCode) || 'USD';
+    if (loading) {
+        return (react_1.default.createElement("div", { className: "add-to-cart-popup" },
+            react_1.default.createElement("div", { className: "loading" }, "Loading...")));
+    }
+    if (error) {
+        return (react_1.default.createElement("div", { className: "add-to-cart-popup" },
+            react_1.default.createElement("div", { className: "error" }, error)));
+    }
+    if (!productData) {
+        return null;
+    }
+    const mainImage = ((_f = productData.images.edges[0]) === null || _f === void 0 ? void 0 : _f.node.url) || '';
+    const variantImage = ((_g = selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.image) === null || _g === void 0 ? void 0 : _g.url) || mainImage;
+    return (react_1.default.createElement("div", { className: "add-to-cart-popup" },
+        react_1.default.createElement("div", { className: "product-header" },
+            react_1.default.createElement("img", { src: mainImage, alt: productData.title, className: "product-thumb" }),
+            react_1.default.createElement("div", { className: "product-title" }, productData.title),
+            onClose && (react_1.default.createElement("button", { className: "close-btn", onClick: onClose }, "\u00D7"))),
+        react_1.default.createElement("div", { className: "variant-detail" },
+            react_1.default.createElement("div", { className: "variant-image-container" },
+                react_1.default.createElement("img", { src: variantImage, alt: "Selected variant", className: "variant-image" })),
+            react_1.default.createElement("div", { className: "variant-info" },
+                react_1.default.createElement("div", { className: "variant-specs" }, Object.keys(selectedOptions).length > 0 ? (Object.entries(selectedOptions).map(([key, value]) => (react_1.default.createElement("span", { key: key, className: "spec-item" }, value)))) : (react_1.default.createElement("span", { className: "spec-placeholder" }, "Please select options"))),
+                react_1.default.createElement("div", { className: "variant-price-row" },
+                    react_1.default.createElement("div", { className: "price" },
+                        "$",
+                        totalPrice),
+                    react_1.default.createElement("div", { className: "quantity-selector" },
+                        react_1.default.createElement("button", { className: "qty-btn", onClick: () => setQuantity(Math.max(1, quantity - 1)), disabled: quantity <= 1 }, "\u2212"),
+                        react_1.default.createElement("span", { className: "qty-value" }, quantity),
+                        react_1.default.createElement("button", { className: "qty-btn", onClick: () => setQuantity(quantity + 1) }, "+"))))),
+        react_1.default.createElement("div", { className: "variant-options" }, productData.options.map(option => (react_1.default.createElement("div", { key: option.name, className: "option-group" },
+            react_1.default.createElement("div", { className: "option-label" }, option.name),
+            react_1.default.createElement("div", { className: "option-values" }, option.values.map(value => {
+                const isAvailable = productData.variants.edges.some(({ node: variant }) => {
+                    const hasThisOption = variant.selectedOptions.some(opt => opt.name === option.name && opt.value === value);
+                    return hasThisOption && variant.availableForSale;
+                });
+                const isSelected = selectedOptions[option.name] === value;
+                return (react_1.default.createElement("button", { key: value, className: `option-btn ${isSelected ? 'selected' : ''} ${!isAvailable ? 'disabled' : ''}`, onClick: () => isAvailable && handleOptionSelect(option.name, value), disabled: !isAvailable }, value));
+            })))))),
+        react_1.default.createElement("button", { className: "add-to-cart-btn", onClick: handleAddToCart, disabled: !selectedVariant }, "Add To Cart")));
+};
+exports.default = AddToCartPopup;

package/lib/materials/sxp/popup/AddToCart/index.old.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;