@anker-in/campaign-ui 0.2.1 → 0.2.2-beta.2

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

@@ -0,0 +1,389 @@
+import { Container, Heading, Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'
+import { useMemo, useState, useEffect, useCallback } 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 { 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()
+
+  console.log('copy in CreditsMemberPrice', copy)
+
+  // 定义需要获取的 metafield，包括透明图
+  const variantMetafieldIdentifiers: any[] = [
+    {
+      namespace: 'global',
+      key: 'transparentImg',
+    },
+  ]
+
+  // 根据屏幕尺寸动态调整每页显示的商品数量
+  useEffect(() => {
+    const updateItemsPerPage = () => {
+      const width = window.innerWidth
+      if (width >= 1024) {
+        // 1024px 以上：3列 × 3行 = 9个
+        setItemsPerPage(9)
+      } else {
+        // 1024px 以下：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])
+
+  // 分页导航组件 - 按照 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
+      }
+
+      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>
+    )
+  }
+
+  return (
+    <Container id={id} className={cn('bg-[#F5F5F5]')}>
+      <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>
+            {renderPagination(memberPricePagination.totalPages)}
+          </>
+        )}
+
+        {/* 积分兑换 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>
+            {renderPagination(redeemPagination.totalPages)}
+          </>
+        )}
+      </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,158 @@
+import { Button, Text, Picture } from '@anker-in/headless-ui'
+import { useMemo } 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 { useCreditsContext } from '../context/provider'
+
+function MemberPriceItem({
+  itemData,
+  copy,
+  className,
+}: {
+  itemData: MemberPriceProduct
+  copy: CreditsMemberPriceCopy['memberPriceTab']
+  className?: string
+}) {
+  const { brand, locale } = useHeadlessContext()
+  const { profile } = 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])
+
+  // Learn More 按钮点击 - 跳转到产品详情页
+  const handleLearnMore = () => {
+    window.location.href = `/products/${itemData.product.handle}`
+  }
+
+  // Shop Now 按钮点击 - 使用 buyNow 进行结算
+  const handleShopNow = () => {
+    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-[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={`/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-[4px] 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] md: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

package/src/components/credits/creditsMemberPrice/index.ts

@@ -0,0 +1,2 @@
+export { CreditsMemberPrice } from './CreditsMemberPrice'
+export * from './type'

package/src/components/credits/creditsMemberPrice/type.ts

@@ -0,0 +1,75 @@
+import { Product, ProductVariant } from '@anker-in/lib'
+
+// 会员价产品配置
+type MemberPriceItemConfig = {
+  title: string
+  image: {
+    url: string
+  }
+  mobileImage: {
+    url: string
+  }
+  // 会员价规则 ID，用于查找折扣配置
+  memberPriceRuleId: string
+  // 预留：会员价计算逻辑相关字段
+  memberPrice?: number
+  // 预留：其他配置字段
+}
+
+// 积分兑换产品配置（复用 creditsCash 的配置）
+type RedeemableItemConfig = {
+  title: string
+  desc: string
+  price: number
+  credit: string
+  rules: string
+  image: {
+    url: string
+  }
+  mobileImage: {
+    url: string
+  }
+  redeemId: number
+}
+
+// Tab 配置
+export type TabConfig = {
+  label: string
+  type: 'memberPrice' | 'redeem'
+}
+
+// 会员价模块整体配置
+export type CreditsMemberPriceCopy = {
+  title: string
+  tabs: TabConfig[]
+  // 会员价 tab 配置（产品列表和价格完全从 memberPriceDiscount 获取）
+  memberPriceTab: {
+    memberPriceRuleId: string // 指定使用哪个会员价规则
+    learnMoreText: string
+    shopNowText: string
+    memberPriceLabel: string
+    memberPriceImg?: {
+      url: string
+      alt?: string
+    }
+  }
+  // 积分兑换 tab 配置（复用 creditsCash 的配置）
+  redeemTab: {
+    list: (RedeemableItemConfig & {
+      products: { handle: string; sku: string }[]
+    })[]
+    soldOut: string
+    unlockRewards: string
+    btnRedeem: string
+    off: string
+  }
+}
+
+// 会员价产品项
+export type MemberPriceProduct = {
+  product: Product
+  productVariant: ProductVariant
+  config?: MemberPriceItemConfig
+  memberPrice: number
+  originalPrice: number
+}