pb-sxp-ui 1.20.28 → 1.20.30

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

@@ -81,7 +81,8 @@ const baseStyles = {
     },
     carouselSection: {
         width: '100%',
-        position: 'relative'
+        position: 'relative',
+        padding: '20px 16px'
     },
     carouselImageContainer: {
         width: '100%',
@@ -112,7 +113,7 @@ const baseStyles = {
     },
     carouselInfoSection: {
         width: '100%',
-        padding: '20px',
+        padding: '10px 20px',
         backgroundColor: '#000',
         color: '#fff',
         textAlign: 'center'
@@ -305,7 +306,7 @@ const baseStyles = {
     }
 };
 const StructurePage = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
     var { containerStyle, containerHeight = 664, containerWidth = 375, className = '', apiUrl = 'https://bff-be-dev.chatlabs.net/api/v1/recommend/list', requestBody, editorMode = false, multiCTAConfig: propMultiCTAConfig, videoPlayIcon: propVideoPlayIcon, isCmsMode = false, storyId, customHeaders } = _a, rest = __rest(_a, ["containerStyle", "containerHeight", "containerWidth", "className", "apiUrl", "requestBody", "editorMode", "multiCTAConfig", "videoPlayIcon", "isCmsMode", "storyId", "customHeaders"]);
     const [data, setData] = useState(null);
     const [loading, setLoading] = useState(true);
@@ -372,7 +373,7 @@ const StructurePage = (_a) => {
         }
         const config = multiCTAConfig[configKey];
         const styleKeys = [
-            'fontSize', 'color', 'textAlign', 'fontWeight',
+            'fontSize', 'color', 'textAlign', 'fontWeight', 'fontStyle', 'textDecoration',
             'backgroundColor', 'padding', 'margin', 'borderRadius',
             'showBorder', 'borderWidth', 'borderColor',
             'buttonBackgroundColor', 'buttonTextColor', 'buttonWidth', 'buttonHeight'
@@ -396,8 +397,16 @@ const StructurePage = (_a) => {
         if (styleConfig.textAlign && typeof styleConfig.textAlign === 'string') {
             customStyle.textAlign = styleConfig.textAlign;
         }
-        if (styleConfig.fontWeight && typeof styleConfig.fontWeight === 'number') {
-            customStyle.fontWeight = styleConfig.fontWeight;
+        if (styleConfig.fontWeight) {
+            customStyle.fontWeight = typeof styleConfig.fontWeight === 'number'
+                ? styleConfig.fontWeight
+                : styleConfig.fontWeight;
+        }
+        if (styleConfig.fontStyle && typeof styleConfig.fontStyle === 'string') {
+            customStyle.fontStyle = styleConfig.fontStyle;
+        }
+        if (styleConfig.textDecoration && typeof styleConfig.textDecoration === 'string') {
+            customStyle.textDecoration = styleConfig.textDecoration;
         }
         if (styleConfig.backgroundColor && typeof styleConfig.backgroundColor === 'string') {
             customStyle.backgroundColor = styleConfig.backgroundColor;
@@ -639,8 +648,8 @@ const StructurePage = (_a) => {
                     React.createElement("video", { ref: heroVideoRef, src: data.heroSection.url, style: baseStyles.heroVideo, autoPlay: true, muted: true, loop: true, playsInline: true, controls: false }),
                     isHeroVideoPaused && (React.createElement(FormatImage, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' })))) : ((_e = data.heroSection.imgUrls) === null || _e === void 0 ? void 0 : _e[0]) ? (React.createElement("img", { src: data.heroSection.imgUrls[0], alt: 'Hero', style: baseStyles.heroImage })) : null,
                 React.createElement("div", { style: baseStyles.heroOverlay }, renderCTA('heroButton', (_g = (_f = data.heroSection.bindProducts) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.bindCta, (_h = data.heroSection.bindProducts) === null || _h === void 0 ? void 0 : _h[0], baseStyles.heroButton))))),
-        data.carouselSection && data.carouselSection.length > 0 && (React.createElement("div", { style: mergeStyles(baseStyles.carouselSection, 'carouselSection') },
-            React.createElement("div", { style: baseStyles.carouselImageContainer },
+        data.carouselSection && data.carouselSection.length > 0 && (React.createElement("div", { style: Object.assign(Object.assign({}, mergeStyles(baseStyles.carouselSection, 'carouselSection')), (((_j = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.carouselContainerStyle) === null || _j === void 0 ? void 0 : _j.padding) && { padding: multiCTAConfig.carouselContainerStyle.padding })) },
+            React.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.carouselImageContainer), (((_k = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.carouselContainerStyle) === null || _k === void 0 ? void 0 : _k.aspectRatio) && { aspectRatio: multiCTAConfig.carouselContainerStyle.aspectRatio })) },
                 React.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.carouselContainer), { transform: `translateX(-${carouselIndex * 100}%)` }) }, data.carouselSection.map((item, index) => {
                     var _a;
                     return (React.createElement("div", { key: item.itemId, style: baseStyles.carouselSlide }, item.url ? (React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' }, onClick: () => handleCarouselVideoClick(index) },
@@ -652,13 +661,14 @@ const StructurePage = (_a) => {
                 React.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { left: '10px' }), onClick: handleCarouselPrev }, "\u2039"),
                 React.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { right: '10px' }), onClick: handleCarouselNext }, "\u203A")),
             React.createElement("div", { style: mergeStyles(baseStyles.carouselInfoSection, 'carouselSection') },
-                ((_j = data.carouselSection[carouselIndex]) === null || _j === void 0 ? void 0 : _j.text) && (React.createElement("div", { style: mergeStyles(baseStyles.carouselText, 'carouselSection') }, (_k = data.carouselSection[carouselIndex]) === null || _k === void 0 ? void 0 : _k.text)),
-                renderCTA('carouselButton', (_o = (_m = (_l = data.carouselSection[carouselIndex]) === null || _l === void 0 ? void 0 : _l.bindProducts) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.bindCta, (_q = (_p = data.carouselSection[carouselIndex]) === null || _p === void 0 ? void 0 : _p.bindProducts) === null || _q === void 0 ? void 0 : _q[0], baseStyles.carouselButton)))),
+                ((_l = data.carouselSection[carouselIndex]) === null || _l === void 0 ? void 0 : _l.text) && (React.createElement("div", { style: mergeStyles(baseStyles.carouselText, 'carouselSection') }, (_m = data.carouselSection[carouselIndex]) === null || _m === void 0 ? void 0 : _m.text)),
+                renderCTA('carouselButton', (_q = (_p = (_o = data.carouselSection[carouselIndex]) === null || _o === void 0 ? void 0 : _o.bindProducts) === null || _p === void 0 ? void 0 : _p[0]) === null || _q === void 0 ? void 0 : _q.bindCta, (_s = (_r = data.carouselSection[carouselIndex]) === null || _r === void 0 ? void 0 : _r.bindProducts) === null || _s === void 0 ? void 0 : _s[0], baseStyles.carouselButton)))),
         data.highlightRevealSection && (React.createElement("div", { style: mergeStyles(baseStyles.highlightSection, 'highlightSection') },
             React.createElement("div", { style: baseStyles.highlightImageContainer },
                 React.createElement("img", { src: data.highlightRevealSection.landingImageUrl || data.highlightRevealSection.cover, alt: data.highlightRevealSection.title, style: baseStyles.highlightImage })),
             React.createElement("div", { style: mergeStyles(baseStyles.highlightInfoSection, 'highlightSection') },
-                React.createElement("div", { style: mergeStyles(baseStyles.highlightTitle, 'highlightSection') }, data.highlightRevealSection.title),
+                data.highlightRevealSection.text && (React.createElement("div", { style: { marginBottom: '10px' } },
+                    React.createElement("div", { style: mergeStyles(baseStyles.highlightTitle, 'highlightSection') }, data.highlightRevealSection.text))),
                 renderCTA('highlightButton', data.highlightRevealSection.bindCta, data.highlightRevealSection, baseStyles.highlightButton)))),
         data.productGridSection && data.productGridSection.length > 0 && (React.createElement("div", { style: mergeStyles(baseStyles.productGrid, 'productGrid') }, (() => {
             const gridItems = [null, null, null, null, null, null];
@@ -700,7 +710,10 @@ const StructurePage = (_a) => {
             });
         })())),
         data.footerSection && (React.createElement("div", { style: mergeStyles(baseStyles.footerSection, 'footerSection') },
-            React.createElement("div", { style: mergeStyles(baseStyles.footerInfoSection, 'footerSection') }, renderCTA('footerButton', data.footerSection.bindCta, data.footerSection, baseStyles.footerButton)),
+            React.createElement("div", { style: mergeStyles(baseStyles.footerInfoSection, 'footerSection') },
+                data.footerSection.text && (React.createElement("div", { style: { marginBottom: '15px' } },
+                    React.createElement("div", { style: mergeStyles(baseStyles.footerText, 'footerSection') }, data.footerSection.text))),
+                renderCTA('footerButton', data.footerSection.bindCta, data.footerSection, baseStyles.footerButton)),
             React.createElement("div", { style: baseStyles.footerImageContainer },
                 React.createElement("img", { src: data.footerSection.landingImageUrl || data.footerSection.cover, alt: data.footerSection.title, style: baseStyles.footerImage }))))));
 };

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

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

package/es/core/utils/materials.js

@@ -1,4 +1,4 @@
-import { setFontForText } from './tool';
+import { setFontForText, getCurrencySymbol } from './tool';
 export const getMediaValueByMode = (obj) => {
     var _a;
     if (!obj || typeof obj !== 'object') {
@@ -31,7 +31,7 @@ export const getBgStyleByImg = (data) => {
     return getBgStyle(imgSrc);
 };
 export 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;
@@ -39,18 +39,41 @@ export const getPriceText = ({ product, enableFormattedPrice, globalConfig, isHi
     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 = 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) === '.') {
@@ -80,7 +103,7 @@ export const getPriceText = ({ product, enableFormattedPrice, globalConfig, isHi
             }
         });
     }
-    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 = 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/es/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/es/core/utils/tool.js

@@ -233,4 +233,47 @@ function getUrlParamByKey(key) {
     }
     return (_b = params[key]) !== null && _b !== void 0 ? _b : '';
 }
+export 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;
+}
 export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader, splitUrlParams, deleteCookie, setCookie, getUrlParamByKey };

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

@@ -2,10 +2,11 @@ import { __awaiter } from "tslib";
 import React, { useState, useEffect, useCallback } from 'react';
 import { useSxpDataSource } from '../../../../core/hooks';
 import Modal from '../../../../core/components/SxpPageRender/Modal';
+import { getCurrencySymbol } from '../../../../core/utils/tool';
 import './index.less';
 const AddToCartPopup = ({ isActive = true }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const { popupDetailData, globalConfig } = useSxpDataSource();
+    const { popupDetailData, globalConfig, bffFbReport } = useSxpDataSource();
     const [productData, setProductData] = useState(null);
     const [selectedOptions, setSelectedOptions] = useState({});
     const [selectedVariant, setSelectedVariant] = useState(null);
@@ -137,6 +138,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()
@@ -148,6 +160,9 @@ const AddToCartPopup = ({ isActive = true }) => {
     const totalPrice = selectedVariant
         ? (parseFloat(selectedVariant.price.amount) * quantity).toFixed(2)
         : '0.00';
+    const displayPrice = selectedVariant
+        ? `${getCurrencySymbol(selectedVariant.price.currencyCode)}${totalPrice}`
+        : totalPrice;
     if (loading) {
         return (React.createElement("div", { className: 'add-to-cart-popup' },
             React.createElement("div", { className: 'loading' }, "Loading...")));
@@ -181,9 +196,7 @@ const AddToCartPopup = ({ isActive = true }) => {
                             "Available: ",
                             selectedVariant.quantityAvailable))),
                     React.createElement("div", { className: 'variant-price-row' },
-                        React.createElement("div", { className: 'price' },
-                            "$",
-                            totalPrice),
+                        React.createElement("div", { className: 'price' }, displayPrice),
                         React.createElement("div", { className: 'quantity-selector' },
                             React.createElement("button", { className: 'qty-btn', onClick: () => setQuantity(Math.max(1, quantity - 1)), disabled: quantity <= 1 }, "\u2212"),
                             React.createElement("span", { className: 'qty-value' }, quantity),
@@ -193,11 +206,17 @@ const AddToCartPopup = ({ isActive = true }) => {
                 React.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/es/materials/sxp/popup/AddToCart/index.new.js

@@ -1,10 +1,11 @@
 import { __awaiter } from "tslib";
 import React, { useState, useEffect, useCallback } from 'react';
 import { useSxpDataSource } from '../../../../core/hooks';
+import { getCurrencySymbol } from '../../../../core/utils/tool';
 import './index.less';
 const AddToCartPopup = ({ isActive = true, onClose }) => {
     var _a, _b, _c, _d, _e, _f, _g;
-    const { popupDetailData, globalConfig } = useSxpDataSource();
+    const { popupDetailData, globalConfig, bffFbReport } = useSxpDataSource();
     const [productData, setProductData] = useState(null);
     const [selectedOptions, setSelectedOptions] = useState({});
     const [selectedVariant, setSelectedVariant] = useState(null);
@@ -120,6 +121,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;
@@ -127,7 +139,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
+        ? `${getCurrencySymbol(selectedVariant.price.currencyCode)}${totalPrice}`
+        : totalPrice;
     if (loading) {
         return (React.createElement("div", { className: "add-to-cart-popup" },
             React.createElement("div", { className: "loading" }, "Loading...")));
@@ -152,9 +166,7 @@ const AddToCartPopup = ({ isActive = true, onClose }) => {
             React.createElement("div", { className: "variant-info" },
                 React.createElement("div", { className: "variant-specs" }, Object.keys(selectedOptions).length > 0 ? (Object.entries(selectedOptions).map(([key, value]) => (React.createElement("span", { key: key, className: "spec-item" }, value)))) : (React.createElement("span", { className: "spec-placeholder" }, "Please select options"))),
                 React.createElement("div", { className: "variant-price-row" },
-                    React.createElement("div", { className: "price" },
-                        "$",
-                        totalPrice),
+                    React.createElement("div", { className: "price" }, displayPrice),
                     React.createElement("div", { className: "quantity-selector" },
                         React.createElement("button", { className: "qty-btn", onClick: () => setQuantity(Math.max(1, quantity - 1)), disabled: quantity <= 1 }, "\u2212"),
                         React.createElement("span", { className: "qty-value" }, quantity),
@@ -164,7 +176,16 @@ const AddToCartPopup = ({ isActive = true, onClose }) => {
             React.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.createElement("button", { key: value, className: `option-btn ${isSelected ? 'selected' : ''} ${!isAvailable ? 'disabled' : ''}`, onClick: () => isAvailable && handleOptionSelect(option.name, value), disabled: !isAvailable }, value));

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

@@ -2,7 +2,7 @@ import { __awaiter, __rest } from "tslib";
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { useSxpDataSource } from '../../../../core/hooks';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
-import { setFontForText } from '../../../../core/utils/tool';
+import { setFontForText, getCurrencySymbol } from '../../../../core/utils/tool';
 import './index.less';
 const AddToCartPopup = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
@@ -227,6 +227,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 = useMemo(() => {
@@ -275,7 +286,7 @@ const AddToCartPopup = (_a) => {
                         option.value)))),
                     React.createElement("div", { className: "price-display" },
                         React.createElement("span", { className: "price-value", style: variantStyles.price, dangerouslySetInnerHTML: {
-                                __html: setFontForText(`${selectedVariant.price.currencyCode} $${totalPrice}`, variantStyles.price)
+                                __html: setFontForText(selectedVariant ? `${getCurrencySymbol(selectedVariant.price.currencyCode)}${totalPrice}` : totalPrice, variantStyles.price)
                             } })),
                     React.createElement("div", { className: "quantity-selector-wrapper", style: quantityStyle },
                         React.createElement("button", { className: "quantity-btn quantity-decrease", onClick: () => handleQuantityChange(-1), disabled: quantity <= 1, "aria-label": "Decrease quantity" }, "-"),

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

@@ -39,25 +39,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/es/materials/sxp/popup/CommodityDetailDiroNew/index.js

@@ -41,6 +41,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/lib/core/components/StructurePage/index.js

@@ -83,7 +83,8 @@ const baseStyles = {
     },
     carouselSection: {
         width: '100%',
-        position: 'relative'
+        position: 'relative',
+        padding: '20px 16px'
     },
     carouselImageContainer: {
         width: '100%',
@@ -114,7 +115,7 @@ const baseStyles = {
     },
     carouselInfoSection: {
         width: '100%',
-        padding: '20px',
+        padding: '10px 20px',
         backgroundColor: '#000',
         color: '#fff',
         textAlign: 'center'
@@ -307,7 +308,7 @@ const baseStyles = {
     }
 };
 const StructurePage = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
     var { containerStyle, containerHeight = 664, containerWidth = 375, className = '', apiUrl = 'https://bff-be-dev.chatlabs.net/api/v1/recommend/list', requestBody, editorMode = false, multiCTAConfig: propMultiCTAConfig, videoPlayIcon: propVideoPlayIcon, isCmsMode = false, storyId, customHeaders } = _a, rest = tslib_1.__rest(_a, ["containerStyle", "containerHeight", "containerWidth", "className", "apiUrl", "requestBody", "editorMode", "multiCTAConfig", "videoPlayIcon", "isCmsMode", "storyId", "customHeaders"]);
     const [data, setData] = (0, react_1.useState)(null);
     const [loading, setLoading] = (0, react_1.useState)(true);
@@ -374,7 +375,7 @@ const StructurePage = (_a) => {
         }
         const config = multiCTAConfig[configKey];
         const styleKeys = [
-            'fontSize', 'color', 'textAlign', 'fontWeight',
+            'fontSize', 'color', 'textAlign', 'fontWeight', 'fontStyle', 'textDecoration',
             'backgroundColor', 'padding', 'margin', 'borderRadius',
             'showBorder', 'borderWidth', 'borderColor',
             'buttonBackgroundColor', 'buttonTextColor', 'buttonWidth', 'buttonHeight'
@@ -398,8 +399,16 @@ const StructurePage = (_a) => {
         if (styleConfig.textAlign && typeof styleConfig.textAlign === 'string') {
             customStyle.textAlign = styleConfig.textAlign;
         }
-        if (styleConfig.fontWeight && typeof styleConfig.fontWeight === 'number') {
-            customStyle.fontWeight = styleConfig.fontWeight;
+        if (styleConfig.fontWeight) {
+            customStyle.fontWeight = typeof styleConfig.fontWeight === 'number'
+                ? styleConfig.fontWeight
+                : styleConfig.fontWeight;
+        }
+        if (styleConfig.fontStyle && typeof styleConfig.fontStyle === 'string') {
+            customStyle.fontStyle = styleConfig.fontStyle;
+        }
+        if (styleConfig.textDecoration && typeof styleConfig.textDecoration === 'string') {
+            customStyle.textDecoration = styleConfig.textDecoration;
         }
         if (styleConfig.backgroundColor && typeof styleConfig.backgroundColor === 'string') {
             customStyle.backgroundColor = styleConfig.backgroundColor;
@@ -641,8 +650,8 @@ const StructurePage = (_a) => {
                     react_1.default.createElement("video", { ref: heroVideoRef, src: data.heroSection.url, style: baseStyles.heroVideo, autoPlay: true, muted: true, loop: true, playsInline: true, controls: false }),
                     isHeroVideoPaused && (react_1.default.createElement(FormatImage_1.default, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' })))) : ((_e = data.heroSection.imgUrls) === null || _e === void 0 ? void 0 : _e[0]) ? (react_1.default.createElement("img", { src: data.heroSection.imgUrls[0], alt: 'Hero', style: baseStyles.heroImage })) : null,
                 react_1.default.createElement("div", { style: baseStyles.heroOverlay }, renderCTA('heroButton', (_g = (_f = data.heroSection.bindProducts) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.bindCta, (_h = data.heroSection.bindProducts) === null || _h === void 0 ? void 0 : _h[0], baseStyles.heroButton))))),
-        data.carouselSection && data.carouselSection.length > 0 && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.carouselSection, 'carouselSection') },
-            react_1.default.createElement("div", { style: baseStyles.carouselImageContainer },
+        data.carouselSection && data.carouselSection.length > 0 && (react_1.default.createElement("div", { style: Object.assign(Object.assign({}, mergeStyles(baseStyles.carouselSection, 'carouselSection')), (((_j = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.carouselContainerStyle) === null || _j === void 0 ? void 0 : _j.padding) && { padding: multiCTAConfig.carouselContainerStyle.padding })) },
+            react_1.default.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.carouselImageContainer), (((_k = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.carouselContainerStyle) === null || _k === void 0 ? void 0 : _k.aspectRatio) && { aspectRatio: multiCTAConfig.carouselContainerStyle.aspectRatio })) },
                 react_1.default.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.carouselContainer), { transform: `translateX(-${carouselIndex * 100}%)` }) }, data.carouselSection.map((item, index) => {
                     var _a;
                     return (react_1.default.createElement("div", { key: item.itemId, style: baseStyles.carouselSlide }, item.url ? (react_1.default.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' }, onClick: () => handleCarouselVideoClick(index) },
@@ -654,13 +663,14 @@ const StructurePage = (_a) => {
                 react_1.default.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { left: '10px' }), onClick: handleCarouselPrev }, "\u2039"),
                 react_1.default.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { right: '10px' }), onClick: handleCarouselNext }, "\u203A")),
             react_1.default.createElement("div", { style: mergeStyles(baseStyles.carouselInfoSection, 'carouselSection') },
-                ((_j = data.carouselSection[carouselIndex]) === null || _j === void 0 ? void 0 : _j.text) && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.carouselText, 'carouselSection') }, (_k = data.carouselSection[carouselIndex]) === null || _k === void 0 ? void 0 : _k.text)),
-                renderCTA('carouselButton', (_o = (_m = (_l = data.carouselSection[carouselIndex]) === null || _l === void 0 ? void 0 : _l.bindProducts) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.bindCta, (_q = (_p = data.carouselSection[carouselIndex]) === null || _p === void 0 ? void 0 : _p.bindProducts) === null || _q === void 0 ? void 0 : _q[0], baseStyles.carouselButton)))),
+                ((_l = data.carouselSection[carouselIndex]) === null || _l === void 0 ? void 0 : _l.text) && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.carouselText, 'carouselSection') }, (_m = data.carouselSection[carouselIndex]) === null || _m === void 0 ? void 0 : _m.text)),
+                renderCTA('carouselButton', (_q = (_p = (_o = data.carouselSection[carouselIndex]) === null || _o === void 0 ? void 0 : _o.bindProducts) === null || _p === void 0 ? void 0 : _p[0]) === null || _q === void 0 ? void 0 : _q.bindCta, (_s = (_r = data.carouselSection[carouselIndex]) === null || _r === void 0 ? void 0 : _r.bindProducts) === null || _s === void 0 ? void 0 : _s[0], baseStyles.carouselButton)))),
         data.highlightRevealSection && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.highlightSection, 'highlightSection') },
             react_1.default.createElement("div", { style: baseStyles.highlightImageContainer },
                 react_1.default.createElement("img", { src: data.highlightRevealSection.landingImageUrl || data.highlightRevealSection.cover, alt: data.highlightRevealSection.title, style: baseStyles.highlightImage })),
             react_1.default.createElement("div", { style: mergeStyles(baseStyles.highlightInfoSection, 'highlightSection') },
-                react_1.default.createElement("div", { style: mergeStyles(baseStyles.highlightTitle, 'highlightSection') }, data.highlightRevealSection.title),
+                data.highlightRevealSection.text && (react_1.default.createElement("div", { style: { marginBottom: '10px' } },
+                    react_1.default.createElement("div", { style: mergeStyles(baseStyles.highlightTitle, 'highlightSection') }, data.highlightRevealSection.text))),
                 renderCTA('highlightButton', data.highlightRevealSection.bindCta, data.highlightRevealSection, baseStyles.highlightButton)))),
         data.productGridSection && data.productGridSection.length > 0 && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.productGrid, 'productGrid') }, (() => {
             const gridItems = [null, null, null, null, null, null];
@@ -702,7 +712,10 @@ const StructurePage = (_a) => {
             });
         })())),
         data.footerSection && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.footerSection, 'footerSection') },
-            react_1.default.createElement("div", { style: mergeStyles(baseStyles.footerInfoSection, 'footerSection') }, renderCTA('footerButton', data.footerSection.bindCta, data.footerSection, baseStyles.footerButton)),
+            react_1.default.createElement("div", { style: mergeStyles(baseStyles.footerInfoSection, 'footerSection') },
+                data.footerSection.text && (react_1.default.createElement("div", { style: { marginBottom: '15px' } },
+                    react_1.default.createElement("div", { style: mergeStyles(baseStyles.footerText, 'footerSection') }, data.footerSection.text))),
+                renderCTA('footerButton', data.footerSection.bindCta, data.footerSection, baseStyles.footerButton)),
             react_1.default.createElement("div", { style: baseStyles.footerImageContainer },
                 react_1.default.createElement("img", { src: data.footerSection.landingImageUrl || data.footerSection.cover, alt: data.footerSection.title, style: baseStyles.footerImage }))))));
 };

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

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