@anker-in/campaign-ui 0.2.10-beta.9 → 0.2.11-beta.3

package/src/components/credits/creditsInfoCard/index.tsx

@@ -2,35 +2,33 @@ import { Button, Container, Text } from '@anker-in/headless-ui'
 
 import { useCallback, useState } from 'react'
 import { useCreditsContext } from '../context/provider'
-import { cn } from '../../../helpers'
 import { numberFormat } from '../context/utils'
 import ActivitiesModal from '../modal/activitiesModal'
-import MyRewardsModal, { type MyRewardsMetafields } from '../modal/MyRewardsModal'
-import { type MyActivitiesMetafields } from '../modal/activitiesModal'
+import MyRewardsModal from '../modal/MyRewardsModal'
+import { gaNormalClick, classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 type ButtonConfig = {
   text: string
   type: 'activities' | 'rewards'
 }
-export interface InfoCardProps {
-  data: {
-    balanceLabel: string
-    comingSoonLabel: string
-    comingSoonTips: string
-    buttons: ButtonConfig[]
-    pointUnit: string
-    infoIcon: string
-    myActivities: MyActivitiesMetafields
-    myRewards: MyRewardsMetafields
-  }
+export type CreditsInfoCardCopy = {
+  balanceLabel: string
+  comingSoonLabel: string
+  comingSoonTips: string
+  buttons: ButtonConfig[]
 }
-export function CreditsInfoCard({ data }: InfoCardProps) {
+
+export function CreditsInfoCard({ copy, id }: { copy: CreditsInfoCardCopy; id?: string }) {
   const [openActivities, setOpenActivities] = useState(false)
   const [openRewards, setOpenRewards] = useState(false)
   const [hover, setHover] = useState<boolean>(false)
+  const { creditInfo, pageCommon } = useCreditsContext()
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const handleButtonClick = useCallback((buttonConfig: ButtonConfig) => {
-    // gaNormalClick({ position: 'info_card', label: buttonConfig.text })
+    gaNormalClick({ position: 'info_card', label: buttonConfig.text })
 
     if (buttonConfig.type) {
       switch (buttonConfig.type) {
@@ -44,16 +42,15 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
     }
   }, [])
 
-  const { creditInfo } = useCreditsContext()
-
   return (
-    <Container asChild id="infoCard" className="-mb-[86px] -translate-y-[86px] x:-mb-[30px] x:-translate-y-[30px]">
+    <Container asChild id={id} className="-mb-[86px] -translate-y-[86px] x:-mb-[30px] x:-translate-y-[30px]">
       <div
         className={cn(
           'mx-auto flex justify-between items-center rounded-[12px] border border-white px-[24px] py-[40px]',
-          'l:flex-col',
+          'l:flex-col l:items-start',
           'min-l:px-[48px]',
-          'min-xl:px-[100px]'
+          'min-xl:px-[100px]',
+          !rounded && 'rounded-none'
         )}
         style={{
           background:
@@ -63,7 +60,7 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
       >
         <div
           className={cn(
-            'grid grid-cols-2 gap-[24px] font-bold md:grid-cols-1 md:flex-col md:gap-[16px] min-md:items-center'
+            'grid grid-cols-2 gap-[24px] font-bold l:w-full md:grid-cols-1 md:flex-col md:gap-[16px] min-md:items-center'
           )}
         >
           <div className="mr-[80px] md:mr-[0] md:flex-1 md-xl:mr-[64px]">
@@ -72,23 +69,23 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
                 'mb-[24px] text-[14px] font-bold l:mb-[6px] xl:text-[16px] min-md:text-[18px] l-xl:mb-[16px]'
               )}
             >
-              {data.balanceLabel}
+              {copy.balanceLabel}
             </div>
             <div className="flex items-baseline">
               <div className={cn('mr-[8px] text-[36px] font-extrabold', 'min-md:text-[44px]', 'min-xl:text-[56px]')}>
                 {creditInfo ? numberFormat(creditInfo.available_credit) : 0}
               </div>
-              <div className="text-[16px]">{data?.pointUnit}</div>
+              <div className="text-[16px]">{pageCommon?.pointUnit}</div>
             </div>
           </div>
           <div className="w-fit md:flex-1">
             <div className={cn('mb-[24px] flex text-[18px] l:mb-[6px] l:text-[14px] l-xl:mb-[16px]')}>
-              <Text className="text-[14px] font-bold xl:text-[16px] min-md:text-[18px]" html={data.comingSoonLabel} />
-              {data.comingSoonTips && (
+              <Text className="text-[14px] font-bold xl:text-[16px] min-md:text-[18px]" html={copy.comingSoonLabel} />
+              {copy.comingSoonTips && (
                 <div className="group relative ml-[4px] flex cursor-pointer items-start">
                   <Text
                     as="div"
-                    html={data?.infoIcon}
+                    html={pageCommon?.infoIcon}
                     className="size-[18px] cursor-pointer [&_svg]:size-full"
                     onClick={() => {
                       if (hover) {
@@ -107,9 +104,19 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
                       hover ? 'block' : 'hidden'
                     )}
                   >
-                    <div className="relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow">
-                      <Text size="2" html={data.comingSoonTips} className="desktop:text-[18px]" />
-                      <div className="absolute -top-[10px] left-[40px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]" />
+                    <div
+                      className={cn(
+                        'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow',
+                        !rounded && 'rounded-none'
+                      )}
+                    >
+                      <Text size="2" html={copy.comingSoonTips} className="desktop:text-[18px]" />
+                      <div
+                        className={cn(
+                          'absolute -top-[10px] left-[40px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]',
+                          !rounded && 'rounded-none'
+                        )}
+                      />
                     </div>
                   </div>
                 </div>
@@ -119,7 +126,7 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
               <div className={cn('mr-[8px] text-[36px] font-extrabold', 'min-l:text-[44px]', 'min-xl:text-[56px]')}>
                 {creditInfo ? numberFormat(creditInfo.pending_credit) : 0}
               </div>
-              <div className="text-[16px]">{data?.pointUnit}</div>
+              <div className="text-[16px]">{pageCommon?.pointUnit}</div>
             </div>
           </div>
         </div>
@@ -128,7 +135,7 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
             'grid w-fit md:w-full l:mt-[32px] l:gap-[12px] min-l:gap-[16px] min-l:pl-[48px] md-l:grid-cols-2'
           )}
         >
-          {data.buttons?.map((item, index) => (
+          {copy.buttons?.map((item, index) => (
             <Button
               key={index}
               variant={index === 0 ? 'secondary' : 'primary'}
@@ -143,19 +150,19 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
           ))}
         </div>
 
-        {data?.myActivities && (
+        {pageCommon?.activitiesModal && (
           <ActivitiesModal
             isOpen={openActivities}
-            data={data?.myActivities}
+            data={pageCommon?.activitiesModal}
             onClose={() => {
               setOpenActivities(false)
             }}
           />
         )}
-        {data?.myRewards && (
+        {pageCommon?.rewardsModal && (
           <MyRewardsModal
             isOpen={openRewards}
-            data={data?.myRewards}
+            data={pageCommon?.rewardsModal}
             onClose={() => {
               setOpenRewards(false)
             }}

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

@@ -0,0 +1,314 @@
+import { Container, Heading, Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'
+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 { Pagination } from './Pagination'
+import { useProductsByHandles } 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'
+
+export const CreditsMemberPrice = ({ copy, id }: { copy: CreditsMemberPriceCopy; id?: string }) => {
+  const [activeTab, setActiveTab] = useState<'memberPrice' | 'redeem'>(copy.tabs[0]?.type || 'memberPrice')
+  const [rules, setRules] = useState<string | string[]>()
+  const [currentPage, setCurrentPage] = useState(1)
+  const [itemsPerPage, setItemsPerPage] = useState(9) // 默认 1024px 以上：3列 × 3行 = 9
+  const { redeemableList } = useRedeemableList()
+  const { pageCommon, memberPriceDiscount } = useCreditsContext()
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  console.log('copy in CreditsMemberPrice', copy)
+
+  // 定义需要获取的 metafield，包括透明图
+  const variantMetafieldIdentifiers: any[] = [
+    {
+      namespace: 'global',
+      key: 'transparentImg',
+    },
+  ]
+
+  // 根据屏幕尺寸动态调整每页显示的商品数量
+  useEffect(() => {
+    const updateItemsPerPage = () => {
+      const width = window.innerWidth
+      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 {
+        // 768px 以下：2列 × 4行 = 8个
+        setItemsPerPage(8)
+      }
+    }
+
+    updateItemsPerPage()
+    window.addEventListener('resize', updateItemsPerPage)
+    return () => window.removeEventListener('resize', updateItemsPerPage)
+  }, [])
+
+  // 当切换 tab 或每页数量变化时重置页码
+  useEffect(() => {
+    setCurrentPage(1)
+  }, [activeTab, itemsPerPage])
+
+  // 根据配置的 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)
+  }, [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])
+
+  // 获取会员价产品数据（通过从 memberPriceDiscount 提取的 handles 获取产品）
+  const { data: memberPriceProducts } = useProductsByHandles({
+    handles: memberPriceHandles,
+    metafieldIdentifiers: {
+      variant: variantMetafieldIdentifiers,
+    },
+  })
+
+  // 获取积分兑换产品数据
+  const { data: redeemProducts } = useProductsByHandles({
+    handles: copy?.redeemTab?.list?.map(item => item.products?.[0]?.handle) || [],
+    metafieldIdentifiers: {
+      variant: variantMetafieldIdentifiers,
+    },
+  })
+
+  // 计算会员价的辅助函数（仅使用普通会员 user_identity = 1 的折扣）
+  const calculateMemberPrice = useCallback(
+    (price: number) => {
+      if (!targetRule) return null
+
+      const discountConfig = targetRule?.discount_conf
+      if (!discountConfig) return null
+
+      // 根据折扣类型计算会员价
+      let salePrice = new Decimal(price)
+      switch (discountConfig.discount_type) {
+        case FunctionDiscountType.Percentage:
+          salePrice = salePrice.mul(100 - discountConfig.discount_value).div(100)
+          break
+        case FunctionDiscountType.FixedAmount:
+          salePrice = salePrice.sub(discountConfig.discount_value)
+          break
+        case FunctionDiscountType.FixedPrice:
+          salePrice = new Decimal(discountConfig.discount_value)
+          break
+      }
+
+      return {
+        memberPrice: salePrice.toNumber(),
+        originalPrice: price,
+      }
+    },
+    [targetRule]
+  )
+
+  // 处理会员价产品列表（仅普通会员 user_identity = 1 的折扣）
+  const memberPriceList = useMemo(() => {
+    if (!targetRule || !memberPriceProducts) return []
+
+    return (
+      (targetRule.main_products.variants
+        .map(variant => {
+          const product = memberPriceProducts.find(p => p.handle === variant.handle)
+          if (!product) return null
+
+          const productVariant = product.variants?.find(v => v.sku === variant.sku) || product.variants?.[0]
+          if (!productVariant || !productVariant.availableForSale) return null
+
+          const priceResult = calculateMemberPrice(productVariant.price.amount)
+          if (!priceResult) return null
+
+          return {
+            product,
+            productVariant,
+            memberPrice: priceResult.memberPrice,
+            originalPrice: priceResult.originalPrice,
+          }
+        })
+        ?.filter(Boolean) as unknown as MemberPriceProduct[]) || []
+    )
+  }, [targetRule, memberPriceProducts, calculateMemberPrice])
+
+  // 处理积分兑换产品列表（复用 creditsCash 的逻辑，过滤缺货商品）
+  const redeemList = useMemo(() => {
+    return redeemProducts
+      ?.map((product: Product) => {
+        const config = copy.redeemTab.list.find(item => item.products?.[0]?.handle === product.handle)
+        const alpcData = redeemableList.find(item => item.id?.toString() === config?.redeemId?.toString())
+        const productVariant =
+          product.variants?.find((variant: any) => variant.sku === config?.products?.[0]?.sku) || product.variants?.[0]
+
+        // 过滤条件：
+        // 1. 必须有 alpcData 和 productVariant
+        // 2. 商品不能缺货
+        // 3. 如果有库存限制，则库存必须大于 0
+        if (!alpcData || !productVariant) return null
+        if (!productVariant.availableForSale) return null
+        if (alpcData.is_limited && alpcData.remaining_inventory <= 0) return null
+
+        return {
+          product,
+          productVariant,
+          alpcData: {
+            id: alpcData?.id,
+            consumeCredits: alpcData?.consume_credits,
+            remainingInventory: alpcData?.remaining_inventory,
+            isLimited: alpcData?.is_limited,
+            consumeType: alpcData?.consume_type,
+            title: alpcData?.name,
+            desc: alpcData?.note,
+          },
+          config,
+        }
+      })
+      .filter(Boolean) as unknown as RedeemItem[]
+  }, [redeemProducts, copy.redeemTab.list, redeemableList])
+
+  // 计算会员价分页
+  const memberPricePagination = useMemo(() => {
+    const totalItems = memberPriceList?.length || 0
+    const totalPages = Math.ceil(totalItems / itemsPerPage)
+    const startIndex = (currentPage - 1) * itemsPerPage
+    const endIndex = startIndex + itemsPerPage
+    const currentItems = memberPriceList?.slice(startIndex, endIndex) || []
+
+    return {
+      totalPages,
+      currentItems,
+      showPagination: totalPages > 1,
+    }
+  }, [memberPriceList, currentPage, itemsPerPage])
+
+  // 计算积分兑换分页
+  const redeemPagination = useMemo(() => {
+    const totalItems = redeemList?.length || 0
+    const totalPages = Math.ceil(totalItems / itemsPerPage)
+    const startIndex = (currentPage - 1) * itemsPerPage
+    const endIndex = startIndex + itemsPerPage
+    const currentItems = redeemList?.slice(startIndex, endIndex) || []
+
+    return {
+      totalPages,
+      currentItems,
+      showPagination: totalPages > 1,
+    }
+  }, [redeemList, currentPage, itemsPerPage])
+
+  // 处理页面切换，滚动到模块顶部
+  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 (
+    <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')}
+      >
+        <TabsList>
+          {copy.tabs.map((tab, index) => (
+            <TabsTrigger key={index} value={tab.type}>
+              {tab.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+
+      {/* Tab 内容 */}
+      <div className="relative mt-[24px]">
+        {/* 会员价 Tab  */}
+        {activeTab === 'memberPrice' && (
+          <>
+            <div className="grid md:grid-cols-2 gap-[12px] grid-cols-4 md-xl:grid-cols-3 lg:gap-[16px]">
+              {memberPricePagination.currentItems?.map((item, index: number) => (
+                <MemberPriceItem key={index} itemData={item} copy={copy.memberPriceTab} />
+              ))}
+            </div>
+            <Pagination
+              currentPage={currentPage}
+              totalPages={memberPricePagination.totalPages}
+              onPageChange={handlePageChange}
+            />
+          </>
+        )}
+
+        {/* 积分兑换 Tab  */}
+        {activeTab === 'redeem' && (
+          <>
+            <div className="grid md:grid-cols-2 gap-[12px] grid-cols-4 md-xl:grid-cols-3 lg:gap-[16px]">
+              {redeemPagination.currentItems?.map((item, index: number) => (
+                <RedeemableItem
+                  key={index}
+                  copy={{
+                    title: copy.title,
+                    ...copy.redeemTab,
+                  }}
+                  itemData={item}
+                  setRules={setRules}
+                  currencyCode={redeemProducts?.[0]?.price.currencyCode || 'USD'}
+                />
+              ))}
+            </div>
+            <Pagination
+              currentPage={currentPage}
+              totalPages={redeemPagination.totalPages}
+              onPageChange={handlePageChange}
+            />
+          </>
+        )}
+      </div>
+
+      {/* Rules Modal */}
+      {rules && (
+        <RulesModal
+          overlayClassName="md:px-[16px] md:items-center"
+          className="md:h-fit md:rounded-b-[16px]"
+          isOpen={rules.length > 0}
+          onClose={() => setRules([])}
+          titleClassName="border-b-transparent h-[56px]"
+          rules={rules}
+          scrollClassName="md:mt-[8px] md:mb-[24px] md:pt-0"
+          title={pageCommon?.ruleLabel}
+          ruleClassName="text-[#1d1d1f] font-bold"
+        />
+      )}
+    </Container>
+  )
+}

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

@@ -0,0 +1,181 @@
+import { Button, Text, Picture } from '@anker-in/headless-ui'
+import { useMemo } from 'react'
+
+import { CreditsMemberPriceCopy, MemberPriceProduct } from './type'
+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,
+  copy,
+  className,
+}: {
+  itemData: MemberPriceProduct
+  copy: CreditsMemberPriceCopy['memberPriceTab']
+  className?: string
+}) {
+  const { brand, locale } = useHeadlessContext()
+  const { profile, openSignUpPopup } = useCreditsContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
+  // 使用 buyNow hook 来处理结算
+  const { trigger: buyNow, isMutating: isBuying } = useBuyNow({}, { throwOnError: true })
+
+  const isAvailable = useMemo(() => {
+    return itemData.productVariant?.availableForSale
+  }, [itemData.productVariant?.availableForSale])
+
+  const isLogin = useMemo(() => {
+    return !!profile
+  }, [profile])
+
+  // Learn More 按钮点击 - 跳转到产品详情页
+  const handleLearnMore = () => {
+    const variantId = extractVariantId(itemData.productVariant?.id)
+    const url = variantId
+      ? `/products/${itemData.product.handle}?variant=${variantId}`
+      : `/products/${itemData.product.handle}`
+    window.location.href = url
+  }
+
+  // Shop Now 按钮点击 - 检查登录状态后使用 buyNow 进行结算
+  const handleShopNow = () => {
+    // 如果未登录，弹出登录弹窗
+    if (!isLogin) {
+      openSignUpPopup()
+      return
+    }
+
+    // 已登录，执行购买
+    buyNow({
+      customAttributes: [
+        {
+          key: '_member_type',
+          value: String(profile?.memberType || 0),
+        },
+      ],
+      lineItems: [
+        {
+          variant: itemData.productVariant,
+          quantity: 1,
+        },
+      ],
+    })
+  }
+
+  return (
+    <div
+      className={cn(
+        'relative flex flex-col items-center bg-[#EAEAEC] p-[24px] l:p-[8px] rounded-[16px] md-xl:p-[16px] md:rounded-[12px]',
+        !rounded && 'rounded-none md:rounded-none',
+        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'}
+        />
+      )}
+
+      {/* 产品图片 - 优先使用产品的 metafields 透明图 */}
+      <a
+        href={
+          extractVariantId(itemData.productVariant?.id)
+            ? `/products/${itemData.product.handle}?variant=${extractVariantId(itemData.productVariant?.id)}`
+            : `/products/${itemData.product.handle}`
+        }
+        className={cn('relative mx-auto size-[138px]')}
+      >
+        <Picture
+          className="mx-auto size-full"
+          imgClassName="object-contain"
+          source={
+            itemData?.productVariant?.metafields?.global?.transparentImg ||
+            itemData?.config?.image?.url ||
+            itemData?.productVariant?.image?.url
+          }
+        ></Picture>
+      </a>
+
+      {/* 产品信息 */}
+      <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]"
+        />
+
+        {/* 价格信息 */}
+        <div className="mt-[16px] flex flex-col gap-[8px]">
+          {/* Member Price 标签 - 使用 text-brand-color-1 */}
+          <Text
+            html={copy.memberPriceLabel}
+            className={cn(
+              'text-brand-color-0 text-[16px] l-xl:text-[14px] l:text-[12px] w-fit font-bold leading-[1.4] tracking-[-0.28px]',
+              brand === 'ankersolix' &&
+                'leading-none bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-[43%] to-[#00db84] bg-clip-text text-transparent'
+            )}
+            as="p"
+          />
+
+          {/* 会员价和原价在同一行 */}
+          <div className="flex items-center gap-[4px]">
+            <Text
+              html={formatPrice({
+                amount: itemData.memberPrice,
+                currencyCode: itemData?.productVariant?.price.currencyCode || 'USD',
+                locale: locale,
+              })}
+              className="text-[24px] l-xxl:text-[20px] l:text-[16px] font-bold leading-[1.2] tracking-[-0.8px] text-[#080A0F]"
+              as="span"
+            />
+            <Text
+              html={formatPrice({
+                amount: itemData.originalPrice,
+                currencyCode: itemData?.productVariant?.price.currencyCode || 'USD',
+                locale: locale,
+              })}
+              className="text-[24px] l-xxl:text-[20px] l:text-[16px] font-bold leading-[1.2] tracking-[-0.8px] text-[#4A4C56] line-through"
+              as="span"
+            />
+          </div>
+
+          {/* 按钮组 */}
+          <div className="flex w-full gap-[8px] l:flex-col">
+            {/* Learn More 按钮 */}
+            <Button
+              variant="secondary"
+              className="flex-1 md:w-full"
+              size="lg"
+              onClick={handleLearnMore}
+              disabled={!isAvailable}
+            >
+              {copy.learnMoreText}
+            </Button>
+
+            {/* Shop Now 按钮 */}
+            <Button
+              variant="primary"
+              className="flex-1 md:w-full"
+              size="lg"
+              onClick={handleShopNow}
+              disabled={!isAvailable || isBuying}
+              loading={isBuying}
+            >
+              {copy.shopNowText}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default MemberPriceItem