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

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

@@ -0,0 +1,113 @@
+import { classNames as cn } from '@anker-in/lib'
+
+interface PaginationProps {
+  currentPage: number
+  totalPages: number
+  onPageChange: (page: number) => void
+}
+
+export function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
+  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={() => onPageChange(Math.max(1, currentPage - 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={() => onPageChange(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={() => onPageChange(Math.min(totalPages, currentPage + 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>
+  )
+}

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
+}

package/src/components/credits/creditsNavigation/CreditsNavigation.tsx

@@ -0,0 +1,123 @@
+import { useEffect, useState, useRef, useCallback } from 'react'
+import { classNames as cn } from '@anker-in/lib'
+import { Container } from '@anker-in/headless-ui'
+import { CreditsNavigationCopy } from './type'
+
+export const CreditsNavigation = ({ copy }: { copy: CreditsNavigationCopy }) => {
+  const [activeId, setActiveId] = useState<string>('')
+  const observerRef = useRef<IntersectionObserver | null>(null)
+
+  // 平滑滚动到目标模块
+  const scrollToSection = (targetId: string) => {
+    const element = document.getElementById(targetId)
+    if (element) {
+      const navHeight = 56 // 导航栏高度
+      const elementPosition = element.getBoundingClientRect().top + window.pageYOffset
+      const offsetPosition = elementPosition - navHeight
+
+      window.scrollTo({
+        top: offsetPosition,
+        behavior: 'smooth',
+      })
+    }
+  }
+
+  // 使用 Intersection Observer 监听模块可见性
+  const setupObserver = useCallback(() => {
+    // 清理之前的 observer
+    if (observerRef.current) {
+      observerRef.current.disconnect()
+    }
+
+    // 计算每个元素在视口中的可见面积
+    const visibilityMap = new Map<string, number>()
+
+    const observerCallback = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach(entry => {
+        const id = entry.target.id
+        if (!id) return
+
+        // 计算可见面积
+        const visibleHeight = entry.intersectionRect.height
+        const visibleWidth = entry.intersectionRect.width
+        const visibleArea = visibleHeight * visibleWidth
+
+        visibilityMap.set(id, entry.isIntersecting ? visibleArea : 0)
+      })
+
+      // 找出可见面积最大的元素
+      let maxArea = 0
+      let maxId = ''
+
+      visibilityMap.forEach((area, id) => {
+        if (area > maxArea) {
+          maxArea = area
+          maxId = id
+        }
+      })
+
+      if (maxId && maxId !== activeId) {
+        setActiveId(maxId)
+      }
+    }
+
+    // 创建新的 observer
+    observerRef.current = new IntersectionObserver(observerCallback, {
+      threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
+      rootMargin: '-56px 0px 0px 0px', // 考虑导航栏高度
+    })
+
+    // 观察所有目标元素
+    copy.items.forEach(item => {
+      const element = document.getElementById(item.targetId)
+      if (element && observerRef.current) {
+        observerRef.current.observe(element)
+      }
+    })
+  }, [copy.items, activeId])
+
+  useEffect(() => {
+    setupObserver()
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect()
+      }
+    }
+  }, [setupObserver])
+
+  return (
+    <nav className={cn('sticky top-0 z-50 bg-white')}>
+      <Container asChild>
+        <div
+          className={cn(
+            'md:overflow-x-auto md:overflow-y-hidden md:-mx-[16px] md:px-[16px]',
+            'md:scrollbar-hide md:[&::-webkit-scrollbar]:hidden md:[-ms-overflow-style:none] md:[scrollbar-width:none]'
+          )}
+        >
+          <ul className={cn('flex items-end gap-[24px] pt-[16px] md:gap-[16px] md:pr-[16px]')}>
+            {copy.items.map((item, index) => {
+              const isActive = activeId === item.targetId
+              return (
+                <li key={index} className={cn('md:flex-shrink-0')}>
+                  <button
+                    onClick={() => scrollToSection(item.targetId)}
+                    className={cn(
+                      'pb-[16px] text-[14px] font-bold tracking-[-0.28px] leading-[1.4]',
+                      'transition-all duration-200 relative border-b-4 whitespace-nowrap',
+                      isActive
+                        ? 'text-[#080a0f] border-brand-1'
+                        : 'text-[#4a4c56] hover:text-[#080a0f] border-transparent'
+                    )}
+                  >
+                    {item.label}
+                  </button>
+                </li>
+              )
+            })}
+          </ul>
+        </div>
+      </Container>
+    </nav>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { CreditsNavigation } from './CreditsNavigation'
+export type { CreditsNavigationCopy, NavigationItem } from './type'

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

@@ -0,0 +1,10 @@
+// 导航项配置
+export type NavigationItem = {
+  label: string
+  targetId: string // 对应组件的DOM id
+}
+
+// 导航组件配置
+export type CreditsNavigationCopy = {
+  items: NavigationItem[]
+}

package/src/components/credits/creditsRedeemList/AddressForm/CountrySelect.tsx

@@ -2,6 +2,8 @@ import { Picture } from '@anker-in/headless-ui'
 import useClickOutside from '../../context/hooks/useClickOutside'
 import classNames from 'classnames'
 import { useEffect, useState } from 'react'
+import { useHeadlessContext } from '@anker-in/lib'
+import { ROUNDED_BRANDS } from '../../../../constants'
 
 interface Country {
   id: string
@@ -20,7 +22,8 @@ interface CountrySelectProps {
 export function CountrySelect({ countries, loading, className, value, onChange }: CountrySelectProps) {
   const [show, setShow] = useState(false)
   const [display, setDisplay] = useState<any>('')
-
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const dorpdown = useClickOutside<HTMLDivElement>(() => {
     setShow(false)
   })
@@ -53,6 +56,7 @@ export function CountrySelect({ countries, loading, className, value, onChange }
       <div
         className={classNames(
           'absolute left-0 top-0 hidden !h-[50px] rounded-[2px] pr-[45px] text-[16px] font-bold focus:!border-[#6D6D6F] min-l:!block',
+          !rounded && 'rounded-none',
           className
         )}
         onClick={() => {
@@ -71,14 +75,15 @@ export function CountrySelect({ countries, loading, className, value, onChange }
 
       <Picture
         source="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/country-select.png?v=1692202500"
-        imgClassName="pointer-events-none absolute right-0 top-0 bottom-0 !w-[45px] object-cover"
+        className="absolute pointer-events-none right-0 top-0 bottom-0 size-[50px] object-cover"
         alt="arrow"
       />
 
       <div
         ref={dorpdown}
         className={classNames(
-          'absolute left-0 top-[58px] z-30 max-h-[334px] w-full cursor-pointer overflow-auto rounded-[4px] bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]',
+          'absolute left-0 top-[58px] z-30 max-h-[334px] w-full cursor-pointer overflow-auto  bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]',
+          !rounded && 'rounded-none',
           { '!hidden': !show }
         )}
       >

package/src/components/credits/creditsRedeemList/AddressForm/StateSelect.tsx

@@ -2,6 +2,8 @@ import classNames from 'classnames'
 import { Picture } from '@anker-in/headless-ui'
 import { useEffect, useMemo, useState } from 'react'
 import useClickOutside from '../../context/hooks/useClickOutside'
+import { useHeadlessContext } from '@anker-in/lib'
+import { ROUNDED_BRANDS } from '../../../../constants'
 
 interface StateSelectProps {
   states: { code: string; id: string; name: string }[]
@@ -16,6 +18,8 @@ interface StateSelectProps {
 export function StateSelect({ states, stateName = '', stateCode = '', className = '', onChange }: StateSelectProps) {
   const [show, setShow] = useState(false)
   const [display, setDisplay] = useState<any>('')
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const dropdown = useClickOutside<HTMLDivElement>(() => {
     setShow(false)
@@ -78,7 +82,8 @@ export function StateSelect({ states, stateName = '', stateCode = '', className
           <div
             ref={dropdown}
             className={classNames(
-              'absolute left-0 top-[58px] z-30 max-h-[334px] w-full cursor-pointer overflow-auto rounded-[4px] bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]',
+              'absolute left-0 top-[58px] z-30 max-h-[334px] w-full cursor-pointer overflow-auto  bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]',
+              !rounded && 'rounded-none',
               { '!hidden': !show }
             )}
           >

package/src/components/credits/creditsRedeemList/AddressForm/index.tsx

@@ -7,13 +7,14 @@ import { Input } from './Input'
 import { StateSelect } from './StateSelect'
 import { ALPC_COUNTRY_MAP } from '../../context/const'
 import { useCreditsContext } from '../../context/provider'
-import { useShopifyContext } from '@anker-in/shopify'
+import { useHeadlessContext } from '@anker-in/lib'
 import { AddressFormProps } from './type'
+import { ROUNDED_BRANDS } from '../../../../constants'
 
 export const AddressForm = ({ countries, countriesLoading, form, validate, errors, onChange }: AddressFormProps) => {
   const { profile, customer } = useCreditsContext()
-  const { locale } = useShopifyContext()
-
+  const { locale, brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const [address, setAddress] = useState<Record<string, any>>()
 
   const states = useMemo(() => {
@@ -58,7 +59,6 @@ export const AddressForm = ({ countries, countriesLoading, form, validate, error
     }
   }, [customer, profile?.email, locale])
 
-  console.log('customer', customer)
   useEffect(() => {
     if (customer) {
       const defaultAddress = getDefaultAddress()
@@ -80,7 +80,8 @@ export const AddressForm = ({ countries, countriesLoading, form, validate, error
               const error = errors.find(item => item.key === input.key)?.message
               const inputClassName = classNames(
                 'h-full w-full appearance-none rounded-[2px] border bg-white px-[14px] py-[17px] leading-[1] outline-none placeholder:text-[#999] autofill:shadow-white focus:border-brand disabled:pointer-events-none disabled:text-[#999] disabled:bg-[#F7F8F9] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
-                error ? '!border-[#F84D4F]' : 'border-[#d8d8d8]'
+                error ? '!border-[#F84D4F]' : 'border-[#d8d8d8]',
+                !rounded && 'rounded-none'
               )
 
               if (input.type === 'state') {

package/src/components/credits/creditsRedeemList/{index.tsx → CreditsRedeemList.tsx}

@@ -1,4 +1,4 @@
-import { Container, Heading, Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'
+import { Container, Heading, Tabs, TabsList, TabsTrigger, Text } from '@anker-in/headless-ui'
 import classNames from 'classnames'
 import { useCallback, useMemo, useState } from 'react'
 
@@ -7,38 +7,29 @@ import RedeemProductModal from './RedeemProductModal'
 import { useCreditsContext } from '../context/provider'
 import useRedeemableList from '../context/hooks/useRedeemableList'
 import { AlpcConsumeType, AlpcErrorCode } from '../context/const'
-import { useProductsByHandles } from '@anker-in/shopify'
+import { useHeadlessContext, useProductsByHandles, gaTrack } from '@anker-in/lib'
 import type { RedeemableItem as RedeemableItemType } from '../type'
 import { RedeemableItem } from './RedeemableItem'
+import { ROUNDED_BRANDS } from '../../../constants'
 import RulesModal from '../modal/rulesModal'
 import { CreditsRedeemListCopy } from './type'
-import { gaTrack } from '../../../helpers/track'
+import { useRegistration } from '../../../components/registration'
+import { numberFormat } from '../context/utils'
 
-export function CreditsRedeemList({
-  copy,
-  className = '',
-  tabClassName = '',
-  hideTitle = false,
-  cardClassName,
-  activate,
-}: {
-  copy: CreditsRedeemListCopy
-  className?: string
-  tabClassName?: string
-  hideTitle?: boolean
-  cardClassName?: string
-  activate: {
-    openAuthCodePopup: () => void
-    isSuccess: boolean
-    setOnSuccess: (callback: Function) => void
-  }
-}) {
+export const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; id?: string }) => {
   const {
     profile,
     openSignUpPopup,
     gtm: { pageGroup },
+    pageCommon,
+    creditInfo,
   } = useCreditsContext()
+  const { authCodeActivate } = useRegistration()
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
   const isLogin = Object.keys(profile || {}).length > 0
+  const isActivated = profile?.activated
 
   const [activeTab, setActiveTab] = useState<string>(copy.list[0].label)
 
@@ -75,6 +66,8 @@ export function CreditsRedeemList({
         const alpcItem = alpcList.find(alpcItem => alpcItem.id === item.id)
         const product = products?.find(product => product.handle === alpcItem?.handle)
         const variant = product?.variants.find(variant => variant.sku === alpcItem?.sku)
+        // 过滤掉库存不足的商品
+        if (alpcItem?.isLimited && (!alpcItem?.remainingInventory || alpcItem.remainingInventory <= 0)) return null
         if (alpcItem?.consumeType === AlpcConsumeType.Product && (!product || !variant)) return null
         return {
           alpc: alpcList.find(alpcItem => alpcItem.id === item.id),
@@ -95,16 +88,23 @@ export function CreditsRedeemList({
     [getRedeemableList]
   )
 
-  console.log('popRedeemData', popRedeemData)
-
   return (
-    <Container className={classNames('relative bg-[#F5F5F7]', className)}>
-      {!hideTitle && <Heading as="h2" size="4" html={copy.title} />}
+    <Container id={id} className={classNames('relative bg-[#F5F5F7]')}>
+      <Heading as="h2" size="4" html={copy.title} />
+
+      {/* 可用积分展示 */}
+      {isLogin && isActivated && (
+        <Text
+          html={copy.availableCredits?.replace('$credits', numberFormat(creditInfo?.available_credit || 0).toString())}
+          className="mt-[12px] text-[20px] l-xxl:text-[18px] l:text-[16px] font-bold text-[#4A4C56]"
+          as="p"
+        />
+      )}
 
       <Tabs
-        shape="rounded"
+        shape={rounded ? 'rounded' : 'square'}
         align="left"
-        className={classNames('sticky top-0 z-20 py-[24px] md:justify-center', tabClassName)}
+        className={classNames('sticky top-0 z-20 py-[24px] md:justify-center')}
         value={activeTab.toString()}
         onValueChange={value => {
           setActiveTab(value)
@@ -139,17 +139,13 @@ export function CreditsRedeemList({
               onRedeem={(item: RedeemableItemType) => {
                 if (!isLogin) {
                   openSignUpPopup()
-                } else if (!profile?.activated && !activate.isSuccess) {
-                  activate.openAuthCodePopup()
-                  activate.setOnSuccess(() => {
-                    setPopRedeemData(item)
-                  })
+                } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {
+                  authCodeActivate.open()
                 } else {
                   setPopRedeemData(item)
                 }
               }}
               onRulesOpen={setRules}
-              className={cardClassName}
             />
           ))}
         </div>
@@ -186,7 +182,7 @@ export function CreditsRedeemList({
           titleClassName="border-b-transparent h-[56px]"
           rules={rules}
           scrollClassName="md:mt-[8px] md:mb-[24px] md:pt-0"
-          title={copy?.ruleLabel}
+          title={pageCommon?.ruleLabel}
           ruleClassName="text-[#1d1d1f] font-bold"
         />
       )}

package/src/components/credits/creditsRedeemList/NonProductValue.tsx

@@ -0,0 +1,39 @@
+import { Text } from '@anker-in/headless-ui'
+import { RedeemableItem } from '../type'
+import { ConsumeType } from '../context/const'
+import { useCreditsContext } from '../context/provider'
+
+export const NoneProductValue = ({ item }: { item: RedeemableItem }) => {
+  const { pageCommon } = useCreditsContext()
+  // shipping coupon 仅展示文案
+  if (item.config?.type === ConsumeType.ShippingCoupon) {
+    return (
+      <div className="absolute left-[16px] l-xxl:left-[12px] bottom-[8px] l:left-[8px] font-extrabold text-white md:bottom-[4px] md:left-[5px]">
+        <Text
+          className="text-[32px] font-bold leading-none md:text-[12px] l-xxl:text-[20px] w-[70%] md:w-full md-l:text-[14px]"
+          html={item.config?.value}
+          as="p"
+        />
+      </div>
+    )
+  } else {
+    return (
+      <div className="absolute left-[16px] l-xxl:left-[12px] l:left-[8px] bottom-[8px] font-extrabold text-white md:bottom-[4px] md:left-[5px]">
+        {item.config?.value ? (
+          <div className="flex items-end">
+            <Text
+              className="text-[64px] font-extrabold leading-none md:text-[20px] l-xxl:text-[40px] md-l:text-[22px]"
+              html={item.config?.value.toString()}
+            />
+            <Text
+              className="ml-[4px] text-[24px] font-bold leading-[2] md:ml-[2px] l:text-[12px] xxl:leading-[1.4] l-xxl:text-[20px]"
+              html={item.config?.type === ConsumeType.GiftCard ? pageCommon?.giftCardLabel : pageCommon?.off}
+            />
+          </div>
+        ) : (
+          <Text className="text-[24px] w-[70%] font-bold leading-none" html={item.config?.title} as="p" />
+        )}
+      </div>
+    )
+  }
+}