pb-sxp-ui 1.20.28 → 1.20.30

package/lib/core/utils/materials.js

@@ -37,7 +37,7 @@ const getBgStyleByImg = (data) => {
 };
 exports.getBgStyleByImg = getBgStyleByImg;
 const getPriceText = ({ product, enableFormattedPrice, globalConfig, isHiddenDef, style }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e;
     let text = '';
     if ((!(product === null || product === void 0 ? void 0 : product.currency) || !(product === null || product === void 0 ? void 0 : product.price)) && isHiddenDef)
         return null;
@@ -45,18 +45,41 @@ const getPriceText = ({ product, enableFormattedPrice, globalConfig, isHiddenDef
     if (typeof price !== 'number')
         return text;
     let priceSymbol = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.priceSymbol;
-    let currency = (product === null || product === void 0 ? void 0 : product.currency) ? (_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.currency) === null || _a === void 0 ? void 0 : _a.split('-')[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : '' : '$';
+    let currencyCode = '';
+    if (product === null || product === void 0 ? void 0 : product.currency) {
+        const parts = product.currency.split('-');
+        if (parts.length > 1) {
+            const firstPart = parts[0].toUpperCase();
+            const secondPart = parts[1].toUpperCase();
+            if (/^[A-Z]{3}$/.test(firstPart)) {
+                currencyCode = firstPart;
+            }
+            else if (/^[A-Z]{3}$/.test(secondPart)) {
+                currencyCode = secondPart;
+            }
+            else {
+                currencyCode = firstPart;
+            }
+        }
+        else {
+            currencyCode = parts[0].toUpperCase();
+        }
+    }
+    else {
+        currencyCode = 'USD';
+    }
+    let currency = (0, tool_1.getCurrencySymbol)(currencyCode);
     const isToLocStr = enableFormattedPrice === undefined || enableFormattedPrice;
     let decPic = price === null || price === void 0 ? void 0 : price.toString();
     if (priceSymbol === null || priceSymbol === void 0 ? void 0 : priceSymbol.showTwoDecimalPoint) {
         decPic = price === null || price === void 0 ? void 0 : price.toFixed(2);
     }
-    let decInd = (_d = decPic === null || decPic === void 0 ? void 0 : decPic.indexOf('.')) !== null && _d !== void 0 ? _d : -1;
+    let decInd = (_a = decPic === null || decPic === void 0 ? void 0 : decPic.indexOf('.')) !== null && _a !== void 0 ? _a : -1;
     if (isToLocStr) {
         text =
-            (_e = price === null || price === void 0 ? void 0 : price.toLocaleString('zh', {
+            (_b = price === null || price === void 0 ? void 0 : price.toLocaleString('zh', {
                 minimumFractionDigits: (priceSymbol === null || priceSymbol === void 0 ? void 0 : priceSymbol.showTwoDecimalPoint) ? 2 : 0
-            })) !== null && _e !== void 0 ? _e : '';
+            })) !== null && _b !== void 0 ? _b : '';
         let startIndex = 0;
         let endIndex = decInd !== null && decInd !== void 0 ? decInd : text === null || text === void 0 ? void 0 : text.length;
         if ((priceSymbol === null || priceSymbol === void 0 ? void 0 : priceSymbol.millesimalSymbol) === '.') {
@@ -86,7 +109,7 @@ const getPriceText = ({ product, enableFormattedPrice, globalConfig, isHiddenDef
             }
         });
     }
-    currency = `<span style="font-family:${(_h = (_g = (_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.priceSymbol) === null || _f === void 0 ? void 0 : _f.fontFamily) !== null && _g !== void 0 ? _g : style === null || style === void 0 ? void 0 : style['fontFamily-en']) !== null && _h !== void 0 ? _h : 'inherit'}">${currency}</span>`;
+    currency = `<span style="font-family:${(_e = (_d = (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.priceSymbol) === null || _c === void 0 ? void 0 : _c.fontFamily) !== null && _d !== void 0 ? _d : style === null || style === void 0 ? void 0 : style['fontFamily-en']) !== null && _e !== void 0 ? _e : 'inherit'}">${currency}</span>`;
     text = (0, tool_1.setFontForText)(text, style);
     if ((priceSymbol === null || priceSymbol === void 0 ? void 0 : priceSymbol.currencyPosition) && (priceSymbol === null || priceSymbol === void 0 ? void 0 : priceSymbol.currencyPosition) !== 'none') {
         text = (priceSymbol === null || priceSymbol === void 0 ? void 0 : priceSymbol.currencyPosition) === 'left' ? currency + text : text + currency;

package/lib/core/utils/tool.d.ts

@@ -16,4 +16,5 @@ declare function splitUrlParams(urlParams: string): string[] | undefined;
 declare function deleteCookie(name: string, path?: string, domain?: string): void;
 declare function setCookie(name: string, value: string, days?: number, path?: string, domain?: string, secure?: boolean, sameSite?: string): void;
 declare function getUrlParamByKey(key: string): any;
+export declare function getCurrencySymbol(currencyCode: string): string;
 export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader, splitUrlParams, deleteCookie, setCookie, getUrlParamByKey };

package/lib/core/utils/tool.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getUrlParamByKey = exports.setCookie = exports.deleteCookie = exports.splitUrlParams = exports.getScreenReader = exports.getCookie = exports.getSystem = exports.getDevice = exports.getBrowserInfo = exports.getIndexByblockType = exports.uuid = exports.setFontForText = exports.getUid = exports.generateRandomString = void 0;
+exports.getUrlParamByKey = exports.setCookie = exports.deleteCookie = exports.splitUrlParams = exports.getScreenReader = exports.getCookie = exports.getSystem = exports.getDevice = exports.getBrowserInfo = exports.getIndexByblockType = exports.uuid = exports.getCurrencySymbol = exports.setFontForText = exports.getUid = exports.generateRandomString = void 0;
 const uuid_1 = require("uuid");
 function uuid(len, radix) {
     const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
@@ -250,3 +250,47 @@ function getUrlParamByKey(key) {
     return (_b = params[key]) !== null && _b !== void 0 ? _b : '';
 }
 exports.getUrlParamByKey = getUrlParamByKey;
+function getCurrencySymbol(currencyCode) {
+    const currencySymbolMap = {
+        USD: '$',
+        EUR: '€',
+        GBP: '£',
+        JPY: '¥',
+        CNY: '¥',
+        KRW: '₩',
+        INR: '₹',
+        RUB: '₽',
+        BRL: 'R$',
+        CAD: 'CA$',
+        AUD: 'A$',
+        CHF: 'CHF',
+        SEK: 'kr',
+        NOK: 'kr',
+        DKK: 'kr',
+        PLN: 'zł',
+        THB: '฿',
+        IDR: 'Rp',
+        MYR: 'RM',
+        PHP: '₱',
+        SGD: 'S$',
+        HKD: 'HK$',
+        TWD: 'NT$',
+        NZD: 'NZ$',
+        MXN: 'MX$',
+        ZAR: 'R',
+        TRY: '₺',
+        AED: 'AED',
+        SAR: 'SAR',
+        ILS: '₪',
+        ARS: 'AR$',
+        CLP: 'CL$',
+        COP: 'CO$',
+        VND: '₫',
+        EGP: 'E£',
+        NGN: '₦',
+        PKR: '₨',
+        BDT: '৳',
+    };
+    return currencySymbolMap[currencyCode.toUpperCase()] || currencyCode;
+}
+exports.getCurrencySymbol = getCurrencySymbol;

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

@@ -4,10 +4,11 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const hooks_1 = require("../../../../core/hooks");
 const Modal_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/Modal"));
+const tool_1 = require("../../../../core/utils/tool");
 require("./index.less");
 const AddToCartPopup = ({ isActive = true }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const { popupDetailData, globalConfig } = (0, hooks_1.useSxpDataSource)();
+    const { popupDetailData, globalConfig, bffFbReport } = (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);
@@ -139,6 +140,17 @@ const AddToCartPopup = ({ isActive = true }) => {
             shopifyDomain,
             selectedVariant
         });
+        bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+            eventName: 'sessionCompleted',
+            product: product ? [product] : undefined,
+            contentType: 'product',
+            rec: data,
+            position: data === null || data === void 0 ? void 0 : data.index,
+            cta_text: 'Add To Cart',
+            cta_action_type: 'add_to_cart',
+            target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
+            target_url: `https://${shopifyDomain}/cart/add`
+        });
         const params = new URLSearchParams({
             id: variantId,
             quantity: quantity.toString()
@@ -150,6 +162,9 @@ const AddToCartPopup = ({ isActive = true }) => {
     const totalPrice = selectedVariant
         ? (parseFloat(selectedVariant.price.amount) * quantity).toFixed(2)
         : '0.00';
+    const displayPrice = selectedVariant
+        ? `${(0, tool_1.getCurrencySymbol)(selectedVariant.price.currencyCode)}${totalPrice}`
+        : totalPrice;
     if (loading) {
         return (react_1.default.createElement("div", { className: 'add-to-cart-popup' },
             react_1.default.createElement("div", { className: 'loading' }, "Loading...")));
@@ -183,9 +198,7 @@ const AddToCartPopup = ({ isActive = true }) => {
                             "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: 'price' }, displayPrice),
                         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),
@@ -195,11 +208,17 @@ const AddToCartPopup = ({ isActive = true }) => {
                 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)
+                        if (!hasThisOption)
+                            return false;
+                        const matchesOtherSelections = Object.entries(selectedOptions).every(([key, val]) => {
+                            if (key === option.name)
+                                return true;
+                            return variant.selectedOptions.some(opt => opt.name === key && opt.value === val);
+                        });
+                        if (!matchesOtherSelections)
+                            return false;
+                        if (!variant.availableForSale)
                             return false;
-                        if (variant.quantityAvailable !== undefined) {
-                            return variant.quantityAvailable > 0;
-                        }
                         return true;
                     });
                     const isSelected = selectedOptions[option.name] === value;

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

@@ -3,10 +3,11 @@ 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 tool_1 = require("../../../../core/utils/tool");
 require("./index.less");
 const AddToCartPopup = ({ isActive = true, onClose }) => {
     var _a, _b, _c, _d, _e, _f, _g;
-    const { popupDetailData, globalConfig } = (0, hooks_1.useSxpDataSource)();
+    const { popupDetailData, globalConfig, bffFbReport } = (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);
@@ -122,6 +123,17 @@ const AddToCartPopup = ({ isActive = true, onClose }) => {
             alert('Please select all options');
             return;
         }
+        bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+            eventName: 'sessionCompleted',
+            product: product ? [product] : undefined,
+            contentType: 'product',
+            rec: data,
+            position: data === null || data === void 0 ? void 0 : data.index,
+            cta_text: 'Add To Cart',
+            cta_action_type: 'add_to_cart',
+            target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
+            target_url: `https://${shopifyDomain}/cart`
+        });
         const variantId = selectedVariant.id.split('/').pop();
         const checkoutUrl = `https://${shopifyDomain}/cart/${variantId}:${quantity}`;
         window.location.href = checkoutUrl;
@@ -129,7 +141,9 @@ const AddToCartPopup = ({ isActive = true, onClose }) => {
     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';
+    const displayPrice = selectedVariant
+        ? `${(0, tool_1.getCurrencySymbol)(selectedVariant.price.currencyCode)}${totalPrice}`
+        : totalPrice;
     if (loading) {
         return (react_1.default.createElement("div", { className: "add-to-cart-popup" },
             react_1.default.createElement("div", { className: "loading" }, "Loading...")));
@@ -154,9 +168,7 @@ const AddToCartPopup = ({ isActive = true, onClose }) => {
             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: "price" }, displayPrice),
                     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),
@@ -166,7 +178,16 @@ const AddToCartPopup = ({ isActive = true, onClose }) => {
             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;
+                    if (!hasThisOption)
+                        return false;
+                    const matchesOtherSelections = Object.entries(selectedOptions).every(([key, val]) => {
+                        if (key === option.name)
+                            return true;
+                        return variant.selectedOptions.some(opt => opt.name === key && opt.value === val);
+                    });
+                    if (!matchesOtherSelections)
+                        return false;
+                    return 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));

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

@@ -229,6 +229,17 @@ const AddToCartPopup = (_a) => {
                     quantity
                 }]
         });
+        bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+            eventName: 'sessionCompleted',
+            product: product ? [product] : undefined,
+            contentType: 'product',
+            rec: data,
+            position,
+            cta_text: 'Add To Cart',
+            cta_action_type: 'add_to_cart',
+            target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
+            target_url: cartUrl
+        });
         window.location.href = cartUrl;
     }, [selectedVariant, quantity, finalShopifyDomain, bffFbReport, product, data, position]);
     const totalPrice = (0, react_1.useMemo)(() => {
@@ -277,7 +288,7 @@ const AddToCartPopup = (_a) => {
                         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)
+                                __html: (0, tool_1.setFontForText)(selectedVariant ? `${(0, tool_1.getCurrencySymbol)(selectedVariant.price.currencyCode)}${totalPrice}` : 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" }, "-"),

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

@@ -41,25 +41,30 @@ const CommodityDetail = (_a) => {
     }
     const handleLink = (e) => {
         if (enableAddToCart && addToCartPopupId) {
-            setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, data), { index: position }));
-            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
-                eventName: 'ClickCTA',
-                product: product ? [product] : undefined,
-                contentType: 'product',
-                data,
-                position,
-                cta_text: cta === null || cta === void 0 ? void 0 : cta.enTitle,
-                cta_action_type: 'open_internal_popup',
-                target_content_id: product === null || product === void 0 ? void 0 : product.itemId
-            });
-            console.log('[CommodityDetail] 打开加购弹窗:', addToCartPopupId);
-            if (typeof window !== 'undefined' && window.sxpPopup) {
-                window.sxpPopup(addToCartPopupId);
+            if (!(product === null || product === void 0 ? void 0 : product.shopifyId)) {
+                console.warn('[CommodityDetail] 非 Shopify 商品，跳过加购弹窗');
             }
             else {
-                console.warn('[CommodityDetail] sxpPopup 方法不存在');
+                setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, data), { index: position }));
+                bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                    eventName: 'ClickCTA',
+                    product: product ? [product] : undefined,
+                    contentType: 'product',
+                    data,
+                    position,
+                    cta_text: cta === null || cta === void 0 ? void 0 : cta.enTitle,
+                    cta_action_type: 'open_internal_popup',
+                    target_content_id: product === null || product === void 0 ? void 0 : product.itemId
+                });
+                console.log('[CommodityDetail] 打开加购弹窗:', addToCartPopupId);
+                if (typeof window !== 'undefined' && window.sxpPopup) {
+                    window.sxpPopup(addToCartPopupId);
+                }
+                else {
+                    console.warn('[CommodityDetail] sxpPopup 方法不存在');
+                }
+                return;
             }
-            return;
         }
         if (product === null || product === void 0 ? void 0 : product.link) {
             jumpToWeb(e, data, product, cta, position);

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

@@ -43,6 +43,31 @@ const CommodityDetailDiroNew = (_a) => {
     }
     const handleLink = (e) => {
         e.preventDefault();
+        if (!(product === null || product === void 0 ? void 0 : product.shopifyId)) {
+            console.warn('[CommodityDetailDiroNew] 非 Shopify 商品，跳转到外链');
+            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 === null || product === void 0 ? void 0 : product.link
+            });
+            if (!isPost) {
+                productView(data, product, cta, viewTime || curTimeRef.current, position);
+            }
+            if (product === null || product === void 0 ? void 0 : product.link) {
+                window.location.href = window.getJointUtmLink(product.link);
+            }
+            return;
+        }
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'

package/package.json

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