@anker-in/campaign-ui 0.2.11-beta.2 → 0.2.11-beta.21

package/src/components/credits/creditsMemberPrice/CreditsMemberPrice.tsx

@@ -1,17 +1,19 @@
 import { Container, Heading, Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'
-import { useMemo, useState, useEffect, useCallback } from 'react'
+import { useMemo, useState, useEffect, useCallback, useRef } from 'react'
 import Decimal from 'decimal.js'
 
 import MemberPriceItem from './MemberPriceItem'
 import RedeemableItem from '../creditsCash/RedeemableItem'
 import useRedeemableList from '../context/hooks/useRedeemableList'
 import RulesModal from '../modal/rulesModal'
-import { useProductsByHandles } from '@anker-in/lib'
+import { Pagination } from './Pagination'
+import { useProductsByHandles, useHeadlessContext, gaTrack } from '@anker-in/lib'
 import { CreditsMemberPriceCopy, MemberPriceProduct } from './type'
 import { Product, classNames as cn } from '@anker-in/lib'
 import { useCreditsContext } from '../context/provider'
 import { RedeemItem } from '../creditsCash/type'
 import { FunctionDiscountType } from '../context/memberPriceConst'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 export const CreditsMemberPrice = ({ copy, id }: { copy: CreditsMemberPriceCopy; id?: string }) => {
   const [activeTab, setActiveTab] = useState<'memberPrice' | 'redeem'>(copy.tabs[0]?.type || 'memberPrice')
@@ -19,27 +21,38 @@ export const CreditsMemberPrice = ({ copy, id }: { copy: CreditsMemberPriceCopy;
   const [currentPage, setCurrentPage] = useState(1)
   const [itemsPerPage, setItemsPerPage] = useState(9) // 默认 1024px 以上：3列 × 3行 = 9
   const { redeemableList } = useRedeemableList()
-  const { pageCommon, memberPriceDiscount } = useCreditsContext()
+  const { pageCommon, memberPriceDiscount, profile, gtm } = useCreditsContext()
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+  const containerRef = useRef<HTMLDivElement>(null)
 
-  console.log('copy in CreditsMemberPrice', copy)
-
-  // 定义需要获取的 metafield，包括透明图
+  // 定义需要获取的 metafield，包括透明图和优惠券信息
   const variantMetafieldIdentifiers: any[] = [
     {
       namespace: 'global',
       key: 'transparentImg',
     },
+    {
+      namespace: '__discountCodeApp',
+      key: 'data',
+    },
   ]
 
   // 根据屏幕尺寸动态调整每页显示的商品数量
   useEffect(() => {
     const updateItemsPerPage = () => {
       const width = window.innerWidth
-      if (width >= 1024) {
-        // 1024px 以上：3列 × 3行 = 9个
+      if (width >= 1440) {
+        // 1920px 以上：4列 × 3行 = 12个
+        setItemsPerPage(12)
+      } else if (width >= 1024) {
+        // 1024px - 1919px：3列 × 3行 = 9个
         setItemsPerPage(9)
+      } else if (width >= 768) {
+        // 1024px 以下：3列 × 4行 = 12个
+        setItemsPerPage(12)
       } else {
-        // 1024px 以下：2列 × 4行 = 8个
+        // 768px 以下：2列 × 4行 = 8个
         setItemsPerPage(8)
       }
     }
@@ -57,18 +70,24 @@ export const CreditsMemberPrice = ({ copy, id }: { copy: CreditsMemberPriceCopy;
   // 根据配置的 ruleId 查找对应的会员价规则
   const targetRule = useMemo(() => {
     if (!memberPriceDiscount || !copy.memberPriceTab.memberPriceRuleId) return null
-    return memberPriceDiscount
-      .find(rule => String(rule.rule_id) === String(copy.memberPriceTab.memberPriceRuleId))
-      ?.result_detail?.member_discounts?.find(discount => discount.user_identity === 1)
+    return memberPriceDiscount.find(rule => String(rule.rule_id) === String(copy.memberPriceTab.memberPriceRuleId))
   }, [memberPriceDiscount, copy.memberPriceTab.memberPriceRuleId])
 
-  console.log('targetRule in CreditsMemberPrice', targetRule)
-
   const memberPriceHandles = useMemo(() => {
     if (!targetRule) return []
 
-    return targetRule.main_products?.variants?.map(variant => variant.handle) || []
-  }, [targetRule?.main_products.variants])
+    // 获取所有 user_identity === 1 的 discounts
+    const allDiscounts = targetRule.result_detail?.member_discounts?.filter(
+      (discount: any) => discount.user_identity === 1
+    ) || []
+
+    // 合并所有 discounts 的 variants 的 handles
+    const handles = allDiscounts.flatMap((discount: any) =>
+      discount.main_products?.variants?.map((variant: any) => variant.handle) || []
+    )
+
+    return handles
+  }, [targetRule])
 
   // 获取会员价产品数据（通过从 memberPriceDiscount 提取的 handles 获取产品）
   const { data: memberPriceProducts } = useProductsByHandles({
@@ -86,12 +105,45 @@ export const CreditsMemberPrice = ({ copy, id }: { copy: CreditsMemberPriceCopy;
     },
   })
 
-  // 计算会员价的辅助函数（仅使用普通会员 user_identity = 1 的折扣）
-  const calculateMemberPrice = useCallback(
-    (price: number) => {
-      if (!targetRule) return null
+  // 从 variant metafields 中获取有效的 coupon 折扣金额
+  const getCouponDiscount = useCallback((variant: any) => {
+    try {
+      const discountData = variant?.metafields?.__discountCodeApp?.data
+      if (!discountData) return 0
+
+      // discountData 已经是对象，不需要 JSON.parse
+      const discounts = discountData
+      if (!Array.isArray(discounts) || discounts.length === 0) return 0
+
+      // 获取第一个有效的 coupon（检查时间范围）
+      const now = new Date()
+      const validDiscount = discounts.find((discount: any) => {
+        const startsAt = discount.starts_at ? new Date(discount.starts_at) : null
+        const endsAt = discount.ends_at ? new Date(discount.ends_at) : null
+
+        // 检查 coupon 是否在有效期内
+        if (startsAt && startsAt > now) return false
+        if (endsAt && endsAt < now) return false
+
+        return true
+      })
 
-      const discountConfig = targetRule?.discount_conf
+      // 返回折扣金额（fixed_amount 类型）
+      if (validDiscount?.fixed_value) {
+        return parseFloat(validDiscount.fixed_value)
+      }
+
+      return 0
+    } catch (error) {
+      console.error('Failed to get coupon discount:', error)
+      return 0
+    }
+  }, [])
+
+  // 计算会员价的辅助函数（仅使用普通会员 user_identity = 1 的折扣，并叠加 coupon 折扣）
+  const calculateMemberPrice = useCallback(
+    (price: number, discount: any, variant?: any) => {
+      const discountConfig = discount?.discount_conf
       if (!discountConfig) return null
 
       // 根据折扣类型计算会员价
@@ -108,28 +160,58 @@ export const CreditsMemberPrice = ({ copy, id }: { copy: CreditsMemberPriceCopy;
           break
       }
 
+      // 叠加 coupon 折扣
+      if (variant) {
+        const couponDiscount = getCouponDiscount(variant)
+        if (couponDiscount > 0) {
+          salePrice = salePrice.sub(couponDiscount)
+        }
+      }
+
+      // 确保价格不为负数
+      if (salePrice.lessThan(0)) {
+        salePrice = new Decimal(0)
+      }
+
       return {
         memberPrice: salePrice.toNumber(),
         originalPrice: price,
       }
     },
-    [targetRule]
+    [getCouponDiscount]
   )
 
   // 处理会员价产品列表（仅普通会员 user_identity = 1 的折扣）
   const memberPriceList = useMemo(() => {
     if (!targetRule || !memberPriceProducts) return []
 
+    // 获取所有 user_identity === 1 的 discounts
+    const allDiscounts = targetRule.result_detail?.member_discounts?.filter(
+      (discount: any) => discount.user_identity === 1
+    ) || []
+
+    // 合并所有 discounts 的 variants，并保存对应的 discount 信息
+    const allVariantsWithDiscount = allDiscounts.flatMap((discount: any) =>
+      (discount.main_products?.variants || []).map((variant: any) => ({
+        ...variant,
+        discount, // 将 discount 信息保存到 variant 中
+      }))
+    )
+
     return (
-      (targetRule.main_products.variants
-        .map(variant => {
-          const product = memberPriceProducts.find(p => p.handle === variant.handle)
+      (allVariantsWithDiscount
+        .map((variantWithDiscount: any) => {
+          const product = memberPriceProducts.find(p => p.handle === variantWithDiscount.handle)
           if (!product) return null
 
-          const productVariant = product.variants?.find(v => v.sku === variant.sku) || product.variants?.[0]
+          const productVariant = product.variants?.find(v => v.sku === variantWithDiscount.sku) || product.variants?.[0]
           if (!productVariant || !productVariant.availableForSale) return null
 
-          const priceResult = calculateMemberPrice(productVariant.price.amount)
+          const priceResult = calculateMemberPrice(
+            productVariant.price.amount,
+            variantWithDiscount.discount,
+            productVariant
+          )
           if (!priceResult) return null
 
           return {
@@ -208,122 +290,56 @@ export const CreditsMemberPrice = ({ copy, id }: { copy: CreditsMemberPriceCopy;
     }
   }, [redeemList, currentPage, itemsPerPage])
 
-  // 分页导航组件 - 按照 Figma 设计
-  const renderPagination = (totalPages: number) => {
-    if (totalPages <= 1) return null
-
-    // 计算要显示的页码
-    const getPageNumbers = () => {
-      const delta = 2 // 当前页前后显示的页码数量
-      const range = []
-      const rangeWithDots = []
-
-      for (let i = 1; i <= totalPages; i++) {
-        if (i === 1 || i === totalPages || (i >= currentPage - delta && i <= currentPage + delta)) {
-          range.push(i)
-        }
-      }
-
-      let prev = 0
-      for (const i of range) {
-        if (prev && i - prev > 1) {
-          rangeWithDots.push('...')
-        }
-        rangeWithDots.push(i)
-        prev = i
+  // 处理页面切换，滚动到模块顶部
+  const handlePageChange = useCallback(
+    (page: number) => {
+      setCurrentPage(page)
+      // 滚动到模块顶部
+      if (containerRef.current) {
+        const top = containerRef.current.offsetTop
+        window.scrollTo({
+          top: top - 80, // 减去 80px 的偏移量，避免被固定头部遮挡
+          behavior: 'smooth',
+        })
       }
+    },
+    [setCurrentPage]
+  )
 
-      return rangeWithDots
-    }
-
-    const pages = getPageNumbers()
-
-    return (
-      <div className="mt-[32px] flex items-center justify-center gap-[8px]">
-        {/* 上一页按钮 */}
-        <button
-          onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
-          disabled={currentPage === 1}
-          className={cn(
-            'flex size-[32px] xl:size-[24px] items-center justify-center overflow-hidden bg-white',
-            currentPage === 1 && 'cursor-not-allowed opacity-50'
-          )}
-        >
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-            <path
-              d="M10 12L6 8L10 4"
-              stroke={currentPage === 1 ? '#767880' : '#080A0F'}
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </button>
-
-        {/* 页码按钮 */}
-        {pages.map((page, index) => {
-          if (page === '...') {
-            return (
-              <div
-                key={`ellipsis-${index}`}
-                className="flex size-[32px] xl:size-[24px] items-center justify-center overflow-hidden bg-white"
-              >
-                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-                  <circle cx="4.5" cy="10" r="1.25" fill="#2A2C32" />
-                  <circle cx="10" cy="10" r="1.25" fill="#2A2C32" />
-                  <circle cx="15.5" cy="10" r="1.25" fill="#2A2C32" />
-                </svg>
-              </div>
-            )
-          }
-
-          const isActive = currentPage === page
-          return (
-            <button
-              key={page}
-              onClick={() => setCurrentPage(page as number)}
-              className={cn(
-                'flex size-[32px] xl:size-[24px] pt-[4px] items-center justify-center overflow-hidden text-[16px] xl:text-[14px] font-bold leading-[1.4] tracking-[-0.28px]',
-                isActive ? 'bg-[#080a0f] text-white' : 'bg-white text-[#080a0f]'
-              )}
-            >
-              {page}
-            </button>
-          )
-        })}
-
-        {/* 下一页按钮 */}
-        <button
-          onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
-          disabled={currentPage === totalPages}
-          className={cn(
-            'flex size-[32px] xl:size-[24px] items-center justify-center overflow-hidden bg-white',
-            currentPage === totalPages && 'cursor-not-allowed opacity-50'
-          )}
-        >
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-            <path
-              d="M6 4L10 8L6 12"
-              stroke={currentPage === totalPages ? '#767880' : '#080A0F'}
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </button>
-      </div>
-    )
-  }
+  // 处理 tab 切换并发送埋点
+  const handleTabChange = useCallback(
+    (value: string) => {
+      const tabType = value as 'memberPrice' | 'redeem'
+      setActiveTab(tabType)
+
+      // 查找当前 tab 的 label
+      const currentTab = copy.tabs.find(tab => tab.type === tabType)
+      const tabLabel = currentTab?.label || ''
+
+      // 发送 tab 点击埋点
+      gaTrack({
+        event: 'ga4Event',
+        event_name: 'lp_button',
+        member_active_status: profile?.activated ? 'active' : 'not active',
+        event_parameters: {
+          page_group: gtm.pageGroup,
+          position: copy.title,
+          button_name: tabLabel,
+        },
+      })
+    },
+    [copy.tabs, copy.title, profile?.activated, gtm.pageGroup]
+  )
 
   return (
-    <Container id={id} className={cn('bg-[#F5F5F5]')}>
+    <Container id={id} className={cn('bg-[#F5F5F5]')} ref={containerRef}>
       <Heading as="h2" size="4" html={copy.title} className="mx:px-[16px]" />
 
       <Tabs
         align="left"
         className="mt-[24px]"
         value={activeTab}
-        onValueChange={value => setActiveTab(value as 'memberPrice' | 'redeem')}
+        onValueChange={handleTabChange}
       >
         <TabsList>
           {copy.tabs.map((tab, index) => (
@@ -344,7 +360,11 @@ export const CreditsMemberPrice = ({ copy, id }: { copy: CreditsMemberPriceCopy;
                 <MemberPriceItem key={index} itemData={item} copy={copy.memberPriceTab} />
               ))}
             </div>
-            {renderPagination(memberPricePagination.totalPages)}
+            <Pagination
+              currentPage={currentPage}
+              totalPages={memberPricePagination.totalPages}
+              onPageChange={handlePageChange}
+            />
           </>
         )}
 
@@ -365,7 +385,11 @@ export const CreditsMemberPrice = ({ copy, id }: { copy: CreditsMemberPriceCopy;
                 />
               ))}
             </div>
-            {renderPagination(redeemPagination.totalPages)}
+            <Pagination
+              currentPage={currentPage}
+              totalPages={redeemPagination.totalPages}
+              onPageChange={handlePageChange}
+            />
           </>
         )}
       </div>
@@ -374,7 +398,7 @@ export const CreditsMemberPrice = ({ copy, id }: { copy: CreditsMemberPriceCopy;
       {rules && (
         <RulesModal
           overlayClassName="md:px-[16px] md:items-center"
-          className="md:h-fit md:rounded-b-[16px]"
+          className={cn('md:h-fit md:rounded-b-[16px]', !rounded && 'md:rounded-none')}
           isOpen={rules.length > 0}
           onClose={() => setRules([])}
           titleClassName="border-b-transparent h-[56px]"

package/src/components/credits/creditsMemberPrice/MemberPriceItem.tsx

@@ -1,10 +1,11 @@
-import { Button, Text, Picture } from '@anker-in/headless-ui'
-import { useMemo } from 'react'
+import { Button, Text, Picture, Badge } from '@anker-in/headless-ui'
+import { useMemo, useState } from 'react'
 
 import { CreditsMemberPriceCopy, MemberPriceProduct } from './type'
-import { formatPrice } from '../context/utils'
-import { classNames as cn, ROUNDED_BRANDS, useHeadlessContext, useBuyNow } from '@anker-in/lib'
+import { formatPrice, extractVariantId } from '../context/utils'
+import { classNames as cn, useHeadlessContext, useBuyNow } from '@anker-in/lib'
 import { useCreditsContext } from '../context/provider'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 function MemberPriceItem({
   itemData,
@@ -16,23 +17,110 @@ function MemberPriceItem({
   className?: string
 }) {
   const { brand, locale } = useHeadlessContext()
-  const { profile } = useCreditsContext()
+  const { profile, openSignUpPopup, cartConfig, gtm } = useCreditsContext()
   const rounded = ROUNDED_BRANDS.includes(brand)
 
   // 使用 buyNow hook 来处理结算
   const { trigger: buyNow, isMutating: isBuying } = useBuyNow({}, { throwOnError: true })
 
+  // 本地 loading 状态，避免全局 loading 影响所有卡片
+  const [isAddingToCart, setIsAddingToCart] = useState(false)
+
   const isAvailable = useMemo(() => {
     return itemData.productVariant?.availableForSale
   }, [itemData.productVariant?.availableForSale])
 
-  // Learn More 按钮点击 - 跳转到产品详情页
-  const handleLearnMore = () => {
-    window.location.href = `/products/${itemData.product.handle}`
+  const isLogin = useMemo(() => {
+    return !!profile
+  }, [profile])
+
+  // 从 variant metafields 中获取 coupon code
+  const getCouponCode = useMemo(() => {
+    try {
+      const discountData = itemData.productVariant?.metafields?.__discountCodeApp?.data
+      if (!discountData) return undefined
+
+      // discountData 已经是对象，不需要 JSON.parse
+      const discounts = discountData
+      if (!Array.isArray(discounts) || discounts.length === 0) return undefined
+
+      // 获取第一个有效的 coupon（检查时间范围）
+      const now = new Date()
+      const validDiscount = discounts.find((discount: any) => {
+        const startsAt = discount.starts_at ? new Date(discount.starts_at) : null
+        const endsAt = discount.ends_at ? new Date(discount.ends_at) : null
+
+        // 检查 coupon 是否在有效期内
+        if (startsAt && startsAt > now) return false
+        if (endsAt && endsAt < now) return false
+
+        return true
+      })
+
+      return validDiscount?.title
+    } catch (error) {
+      console.error('Failed to get discount code:', error)
+      return undefined
+    }
+  }, [itemData.productVariant?.metafields])
+
+  // Add to Cart 按钮点击 - 调用加购方法
+  const handleAddToCart = async () => {
+    if (!cartConfig?.addToCart) {
+      console.warn('cartConfig.addToCart is required')
+      return
+    }
+
+    try {
+      setIsAddingToCart(true)
+
+      // 构建 lineItem attributes
+      const lineItemAttributes: Array<{ key: string; value: string }> = []
+      if (getCouponCode) {
+        lineItemAttributes.push({
+          key: '_member_price',
+          value: JSON.stringify({ code: getCouponCode }),
+        })
+      }
+
+      await cartConfig.addToCart({
+        variantList: [
+          {
+            variant: itemData.productVariant,
+            quantity: 1,
+            attributes: lineItemAttributes.length > 0 ? lineItemAttributes : undefined,
+          },
+        ],
+        cartAttributes: {
+          _member_type: String(profile?.memberType || 0),
+        },
+        discountCodes: getCouponCode ? [getCouponCode] : undefined,
+      })
+    } catch (error) {
+      console.error('Add to cart failed:', error)
+    } finally {
+      setIsAddingToCart(false)
+    }
   }
 
-  // Shop Now 按钮点击 - 使用 buyNow 进行结算
+  // Shop Now 按钮点击 - 检查登录状态后使用 buyNow 进行结算
   const handleShopNow = () => {
+    // 如果未登录，弹出登录弹窗
+    if (!isLogin) {
+      openSignUpPopup()
+      return
+    }
+
+    // 构建 lineItem attributes
+    const lineItemAttributes: Array<{ key: string; value: string }> = []
+    if (getCouponCode) {
+      lineItemAttributes.push({
+        key: '_member_price',
+        value: JSON.stringify({ code: getCouponCode }),
+      })
+    }
+
+    // 已登录，执行购买
     buyNow({
       customAttributes: [
         {
@@ -44,34 +132,50 @@ function MemberPriceItem({
         {
           variant: itemData.productVariant,
           quantity: 1,
+          attributes: lineItemAttributes.length > 0 ? lineItemAttributes : undefined,
         },
       ],
+      discountCodes: getCouponCode ? [getCouponCode] : undefined,
+      gtmParams: {
+        pageGroup: gtm.pageGroup,
+        position: 'mmeber-price-card',
+      },
     })
   }
 
   return (
     <div
       className={cn(
-        'relative flex flex-col items-center bg-[#EAEAEC] p-[16px] md:rounded-[12px]',
+        'relative flex flex-col items-center bg-[#EAEAEC] px-[24px] pb-[24px] l:px-[8px] l:pb-[8px] rounded-[16px] md-xl:px-[16px] md-xl:pb-[16px] md:rounded-[12px]',
         !rounded && 'rounded-none md:rounded-none',
+        copy.badgeLabel ? 'pt-[48px] l:pt-[44px]' : 'pt-[24px] md-xl:pt-[16px] l:pt-[8px]',
         className
       )}
     >
-      {/* Member 标签图片 */}
-      {copy.memberPriceImg && (
-        <Picture
-          className="absolute left-[24px] top-[16px] h-[24px] w-auto"
-          imgClassName="!h-full object-contain"
-          source={copy.memberPriceImg.url}
-          alt={copy.memberPriceImg.alt || 'Member Price'}
-        />
+      {/* Member 标签 Badge */}
+      {copy.badgeLabel && (
+        <Badge
+          className="absolute left-[24px] !bg-gradient-brand l:left-[16px] top-[16px] z-10"
+          size="lg"
+          variant="promotional"
+          promotionalType="regular-member"
+        >
+          {copy.badgeLabel}
+        </Badge>
       )}
 
       {/* 产品图片 - 优先使用产品的 metafields 透明图 */}
-      <a href={`/products/${itemData.product.handle}`} className={cn('relative mx-auto size-[138px]')}>
+      <a
+        href={
+          extractVariantId(itemData.productVariant?.id)
+            ? `/products/${itemData.product.handle}?variant=${extractVariantId(itemData.productVariant?.id)}${gtm.pageHandle ? `&ref=${gtm.pageHandle}` : ''}`
+            : `/products/${itemData.product.handle}${gtm.pageHandle ? `?ref=${gtm.pageHandle}` : ''}`
+        }
+        className={cn('relative mx-auto h-[196px] w-fit md:h-[120px] md-xxl:h-[138px]')}
+      >
         <Picture
-          className="mx-auto size-full"
-          imgClassName="object-contain"
+          className="mx-auto h-full w-auto"
+          imgClassName="h-full object-contain"
           source={
             itemData?.productVariant?.metafields?.global?.transparentImg ||
             itemData?.config?.image?.url ||
@@ -81,16 +185,16 @@ function MemberPriceItem({
       </a>
 
       {/* 产品信息 */}
-      <div className={cn('mt-[4px] w-full')}>
+      <div className={cn('mt-[10px] xl:mt-[8px] w-full')}>
         {/* 产品标题 - 使用产品的真实标题 */}
         <Text
           html={itemData?.product?.title}
           title={itemData?.product?.title}
-          className="line-clamp-2 text-[24px] l-xxl:text-[20px] l:text-[16px] font-bold leading-[1.2] tracking-[-0.8px] text-[#080A0F]"
+          className="line-clamp-2 text-[24px] min-h-[58px] l-xxl:min-h-[48px] l:min-h-[38px] l-xxl:text-[20px] l:text-[16px] font-bold leading-[1.2] tracking-[-0.8px] text-[#080A0F]"
         />
 
         {/* 价格信息 */}
-        <div className="mt-[16px] flex flex-col gap-[8px]">
+        <div className="mt-[24px] l:mt-[12px] flex flex-col gap-[8px] l:gap-0">
           {/* Member Price 标签 - 使用 text-brand-color-1 */}
           <Text
             html={copy.memberPriceLabel}
@@ -125,16 +229,17 @@ function MemberPriceItem({
           </div>
 
           {/* 按钮组 */}
-          <div className="flex w-full gap-[8px] md:flex-col">
-            {/* Learn More 按钮 */}
+          <div className="flex w-full mt-[8px] gap-[8px] l:flex-col">
+            {/* Add to Cart 按钮 */}
             <Button
               variant="secondary"
               className="flex-1 md:w-full"
               size="lg"
-              onClick={handleLearnMore}
-              disabled={!isAvailable}
+              onClick={handleAddToCart}
+              disabled={!isAvailable || !cartConfig?.addToCart || isAddingToCart}
+              loading={isAddingToCart}
             >
-              {copy.learnMoreText}
+              {copy.addToCart}
             </Button>
 
             {/* Shop Now 按钮 */}