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

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/type.ts

@@ -45,13 +45,10 @@ export type CreditsMemberPriceCopy = {
   // 会员价 tab 配置（产品列表和价格完全从 memberPriceDiscount 获取）
   memberPriceTab: {
     memberPriceRuleId: string // 指定使用哪个会员价规则
-    learnMoreText: string
+    addToCart: string
     shopNowText: string
     memberPriceLabel: string
-    memberPriceImg?: {
-      url: string
-      alt?: string
-    }
+    badgeLabel?: string
   }
   // 积分兑换 tab 配置（复用 creditsCash 的配置）
   redeemTab: {
@@ -62,6 +59,7 @@ export type CreditsMemberPriceCopy = {
     unlockRewards: string
     btnRedeem: string
     off: string
+    badgeLabel?: string
   }
 }
 

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

@@ -87,7 +87,7 @@ export const CreditsNavigation = ({ copy }: { copy: CreditsNavigationCopy }) =>
   }, [setupObserver])
 
   return (
-    <nav className={cn('sticky top-0 z-50 bg-white')}>
+    <nav id="creditsNavigation" className={cn('sticky top-0 z-50 bg-white')}>
       <Container asChild>
         <div
           className={cn(
@@ -95,7 +95,7 @@ export const CreditsNavigation = ({ copy }: { copy: CreditsNavigationCopy }) =>
             '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]')}>
+          <ul className={cn('flex items-end gap-[24px] pt-[16px] md:pt-[12px] md:gap-[16px] md:pr-[16px]')}>
             {copy.items.map((item, index) => {
               const isActive = activeId === item.targetId
               return (
@@ -103,7 +103,7 @@ export const CreditsNavigation = ({ copy }: { copy: CreditsNavigationCopy }) =>
                   <button
                     onClick={() => scrollToSection(item.targetId)}
                     className={cn(
-                      'pb-[16px] text-[14px] font-bold tracking-[-0.28px] leading-[1.4]',
+                      'pb-[16px] md:pb-[12px] 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'

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

@@ -2,7 +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, ROUNDED_BRANDS } from '@anker-in/lib'
+import { useHeadlessContext } from '@anker-in/lib'
+import { ROUNDED_BRANDS } from '../../../../constants'
 
 interface Country {
   id: string

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

@@ -2,7 +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, ROUNDED_BRANDS } from '@anker-in/lib'
+import { useHeadlessContext } from '@anker-in/lib'
+import { ROUNDED_BRANDS } from '../../../../constants'
 
 interface StateSelectProps {
   states: { code: string; id: string; name: string }[]

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

@@ -7,8 +7,9 @@ import { Input } from './Input'
 import { StateSelect } from './StateSelect'
 import { ALPC_COUNTRY_MAP } from '../../context/const'
 import { useCreditsContext } from '../../context/provider'
-import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+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()

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

@@ -1,4 +1,4 @@
-import { Container, Heading, Tabs, TabsList, TabsTrigger, Text } from '@anker-in/headless-ui'
+import { Container, Heading, Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'
 import classNames from 'classnames'
 import { useCallback, useMemo, useState } from 'react'
 
@@ -7,9 +7,10 @@ import RedeemProductModal from './RedeemProductModal'
 import { useCreditsContext } from '../context/provider'
 import useRedeemableList from '../context/hooks/useRedeemableList'
 import { AlpcConsumeType, AlpcErrorCode } from '../context/const'
-import { useHeadlessContext, useProductsByHandles, gaTrack, ROUNDED_BRANDS } from '@anker-in/lib'
+import { useHeadlessContext, useProductsByHandles, gaTrack, classNames as cn } 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 { useRegistration } from '../../../components/registration'
@@ -28,9 +29,8 @@ export const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; i
   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)
+  const [activeTab, setActiveTab] = useState<string>(copy.list?.[0]?.label || '')
 
   const [popRedeemData, setPopRedeemData] = useState<RedeemableItemType | undefined>(undefined)
 
@@ -58,18 +58,18 @@ export const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; i
   const { data: products } = useProductsByHandles({ handles })
 
   const list = useMemo(() => {
-    const currentList = copy.list.find(item => item.label === activeTab)
-    return currentList?.list
-      .filter(item => alpcList.some(alpcItem => alpcItem.id === item.id))
+    const currentList = copy.list?.find(item => item.label === activeTab)
+    return (currentList?.list || [])
+      .filter(item => alpcList.some(alpcItem => String(alpcItem.id) === String(item.id)))
       .map(item => {
-        const alpcItem = alpcList.find(alpcItem => alpcItem.id === item.id)
+        const alpcItem = alpcList.find(alpcItem => String(alpcItem.id) === String(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),
+          alpc: alpcList.find(alpcItem => String(alpcItem.id) === String(item.id)),
           config: item,
           product,
           variant,
@@ -92,18 +92,32 @@ export const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; i
       <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"
-        />
+      {isLogin && copy.availableCredits && (
+        <p className="mt-[12px] text-[20px] l-xxl:text-[18px] l:text-[16px] font-bold text-[#4A4C56]">
+          {copy.availableCredits.includes('$credits') ? (
+            <>
+              {copy.availableCredits.split('$credits')[0]}
+              <span
+                className={cn(
+                  'text-brand-color-0',
+                  brand === 'ankersolix' &&
+                    'bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-[43%] to-[#00db84] bg-clip-text text-transparent'
+                )}
+              >
+                {numberFormat(creditInfo?.available_credit || 0).toString()}
+              </span>
+              {copy.availableCredits.split('$credits')[1] || ''}
+            </>
+          ) : (
+            copy.availableCredits
+          )}
+        </p>
       )}
 
       <Tabs
         shape={rounded ? 'rounded' : 'square'}
         align="left"
-        className={classNames('sticky top-0 z-20 py-[24px] md:justify-center')}
+        className={classNames('py-[24px] md:justify-center')}
         value={activeTab.toString()}
         onValueChange={value => {
           setActiveTab(value)
@@ -118,7 +132,7 @@ export const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; i
         }}
       >
         <TabsList>
-          {copy.list.map(item => (
+          {(copy.list || []).map(item => (
             <TabsTrigger key={item.label} value={item.label}>
               {item.label}
             </TabsTrigger>
@@ -175,7 +189,7 @@ export const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; i
       {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/creditsRedeemList/RedeemProductModal/Address.tsx

@@ -1,11 +1,12 @@
 import { Button, Text } from '@anker-in/headless-ui'
 import classNames from 'classnames'
 import { AddressForm } from '../AddressForm'
-import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { useHeadlessContext } from '@anker-in/lib'
 import type { RedeemableItem as RedeemableItemType } from '../../type'
 import { CreditsRedeemListCopy } from '../type'
 import { ProductInfo } from './ProductInfo'
 import useCountries from '../../context/hooks/useCountries'
+import { ROUNDED_BRANDS } from '../../../../constants'
 
 type AddressProps = {
   copy: CreditsRedeemListCopy

package/src/components/credits/creditsRedeemList/RedeemProductModal/ProductInfo.tsx

@@ -41,10 +41,12 @@ export const ProductInfo = ({ item, copy }: ProductInfoProps) => {
           ></Text>
           <div className="flex font-semibold leading-[1.4] md:flex-col">
             <div className="mr-[40px] text-[15px] font-bold text-[#777] md:mr-0 md:text-[12px]">
-              <div className="mb-[8px] flex items-center md:mb-[4px]">
-                <span>{copy.redeemModal.product.variantLabel}: </span>
-                <span className="ml-1">{item.variant.title || ''}</span>
-              </div>
+              {item.variant.title && item.variant.title.toLowerCase() !== 'default title' && (
+                <div className="mb-[8px] flex items-center md:mb-[4px]">
+                  <span>{copy.redeemModal.product.variantLabel}: </span>
+                  <span className="ml-1">{item.variant.title}</span>
+                </div>
+              )}
               <div className="mb-[8px] flex items-center md:mb-[4px]">
                 <span>{copy.redeemModal.product.shippingFeeLabel}: </span>
                 <span className="ml-1">

package/src/components/credits/creditsRedeemList/RedeemProductModal/Success.tsx

@@ -3,7 +3,8 @@ import classNames from 'classnames'
 import type { RedeemableItem as RedeemableItemType } from '../../type'
 import { CreditsRedeemListCopy } from '../type'
 import { ProductInfo } from './ProductInfo'
-import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { useHeadlessContext } from '@anker-in/lib'
+import { ROUNDED_BRANDS } from '../../../../constants'
 
 type SuccessProps = {
   copy: CreditsRedeemListCopy

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

@@ -6,10 +6,11 @@ import classNames from 'classnames'
 import { useCreditsContext } from '../context/provider'
 import type { RedeemableItem as RedeemableItemType } from '../type'
 import { AlpcConsumeType, ConsumeType } from '../context/const'
-import { numberFormat } from '../context/utils'
+import { numberFormat, extractVariantId } from '../context/utils'
 import type { CreditsRedeemListCopy } from './type'
-import { gaTrack, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { gaTrack, useHeadlessContext } from '@anker-in/lib'
 import { NoneProductValue } from './NonProductValue'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 export function RedeemableItem({
   copy,
@@ -27,7 +28,7 @@ export function RedeemableItem({
   const {
     creditInfo,
     profile,
-    gtm: { pageGroup },
+    gtm: { pageGroup, pageHandle },
     pageCommon,
   } = useCreditsContext()
   const { brand } = useHeadlessContext()
@@ -79,6 +80,16 @@ export function RedeemableItem({
     pageCommon?.soldOut,
   ])
 
+  // 生成产品 listing 页面链接
+  const productUrl = useMemo(() => {
+    if (item.config?.type !== ConsumeType.Product || !item.product?.handle) {
+      return undefined
+    }
+    return extractVariantId(item.variant?.id)
+      ? `/products/${item.product.handle}?variant=${extractVariantId(item.variant?.id)}${pageHandle ? `&ref=${pageHandle}` : ''}`
+      : `/products/${item.product.handle}${pageHandle ? `?ref=${pageHandle}` : ''}`
+  }, [item.config?.type, item.product?.handle, item.variant?.id, pageHandle])
+
   return (
     <div
       className={classNames(
@@ -88,12 +99,15 @@ export function RedeemableItem({
       )}
     >
       {item.config?.type === ConsumeType.Product ? (
-        <div className={classNames('relative mx-auto h-[224px] w-fit md:my-[10px] l:h-[120px] l-xxl:h-[138px]')}>
+        <a
+          href={productUrl}
+          className={classNames('relative mx-auto h-[224px] w-fit md:my-[10px] l:h-[120px] l-xxl:h-[138px]')}
+        >
           <Picture
             className="h-full w-auto [&_img]:h-full [&_img]:object-contain"
             source={item.config?.image?.url || item.product.images?.[0]?.url}
           ></Picture>
-        </div>
+        </a>
       ) : (
         <div className="relative mx-auto my-[30px] h-[164px] md:my-0 md:h-[66px] l-xxl:h-[138px] md-l:h-[80px]">
           <Picture
@@ -104,7 +118,7 @@ export function RedeemableItem({
           <NoneProductValue item={item} />
         </div>
       )}
-      <div className={classNames('mt-[22px] flex w-full flex-1 flex-col justify-between')}>
+      <div className={classNames('mt-[10px] xl:mt-[8px] flex w-full flex-1 flex-col justify-between')}>
         <Text
           html={item.config?.title || item.alpc?.title}
           title={item.config?.title || item.alpc?.title}
@@ -149,7 +163,7 @@ export function RedeemableItem({
               html={`${numberFormat(item.alpc?.consumeCredits)}`}
               size={2}
               as="p"
-              className="ml-[4px] text-[28px] font-bold mt-[4px] leading-none md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] "
+              className="ml-[4px] text-[24px] font-bold mt-[4px] leading-none l-xxl:text-[20px] l:text-[16px] "
             />
           </div>
 

package/src/components/credits/creditsWaysToGetCredits/CreditsWaysToGetCredits.tsx

@@ -1,18 +1,19 @@
 import { Button, Container, Heading, Picture, Text } from '@anker-in/headless-ui'
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'
-import { motion } from 'framer-motion'
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 
 import { TaskType, type CreditsWaysToGetCreditsProps } from './type'
 import { useActions } from './useActions'
 import { useCreditsContext } from '../context/provider'
-import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { useRegistration } from '../../registration'
 import { CreditsUploadReceiptModal } from '../modal/creditsUploadReceiptModal'
 import { CreditsSubscribeModal } from '../modal/subscribeModal'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 export const CreditsWaysToGetCredits = ({ copy, classNames, id }: CreditsWaysToGetCreditsProps & { id?: string }) => {
   const [showMore, setShowMore] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
   const { profile } = useCreditsContext()
   const { authCodeActivate } = useRegistration()
   const { brand } = useHeadlessContext()
@@ -36,7 +37,7 @@ export const CreditsWaysToGetCredits = ({ copy, classNames, id }: CreditsWaysToG
     },
   })
   const list = useMemo(() => {
-    const list = copy.list
+    const list = (copy.list || [])
       .map(item => {
         if (!actions[item.id as keyof typeof actions]) {
           return undefined
@@ -90,6 +91,18 @@ export const CreditsWaysToGetCredits = ({ copy, classNames, id }: CreditsWaysToG
     }
   }, [actions, copy.list, isLogin])
 
+  useEffect(() => {
+    if (!showMore && window.innerWidth < 768) {
+      const section = document.getElementById('ways-to-get-credits')
+      if (section) {
+        const timer = setTimeout(() => {
+          section.scrollIntoView({ behavior: 'smooth', block: 'end' })
+        }, 300)
+        return () => clearTimeout(timer)
+      }
+    }
+  }, [showMore])
+
   return (
     <Container id={id} className=" bg-[#F5F5F7] [&>div]:l:!px-0">
       <div
@@ -122,21 +135,12 @@ export const CreditsWaysToGetCredits = ({ copy, classNames, id }: CreditsWaysToG
         </div>
 
         <div className="relative">
-          <motion.div
+          <div
+            ref={containerRef}
             className={cn(
-              'relative mt-[64px] grid grid-cols-3 gap-[16px] overflow-hidden md:mt-[16px] md:grid-cols-1 l:gap-[12px]  min-md:!h-auto md-l:mt-[32px] md-l:grid-cols-2'
+              'relative mt-[64px] grid grid-cols-3 gap-[16px] overflow-hidden transition-all duration-300 md:mt-[16px] md:grid-cols-1 l:gap-[12px] md-l:mt-[32px] md-l:grid-cols-2',
+              showMore ? 'min-md:!h-auto md:h-auto' : 'md:h-[512px] min-md:!h-auto'
             )}
-            initial={{ height: 512 }}
-            animate={{ height: showMore ? 'auto' : 512 }}
-            transition={{ duration: 0.3 }}
-            onAnimationComplete={() => {
-              if (!showMore && window.screen.width < 768) {
-                const section = document.getElementById('ways-to-get-credits')
-                if (section) {
-                  section.scrollIntoView({ behavior: 'smooth', block: 'end' })
-                }
-              }
-            }}
           >
             {list.map(item => (
               <div
@@ -147,13 +151,23 @@ export const CreditsWaysToGetCredits = ({ copy, classNames, id }: CreditsWaysToG
                 )}
               >
                 <div>
-                  <Heading as="h4" html={item.title} size={2} className="text-pretty" />
+                  <Text
+                    as="p"
+                    html={item.title}
+                    size={2}
+                    className="text-pretty text-[24px] font-bold xl:text-[20px]"
+                  />
                   <div className="mt-[4px] flex items-center">
                     <Picture
                       className="size-[24px] xl:size-[18px] [&_path]:size-full"
                       source="https://cdn.shopify.com/s/files/1/0511/6346/3874/files/20250902-153351.png?v=1756798450"
                     />
-                    <Text as="p" html={item.credits} size={2} className="ml-[4px] mt-[6px] lg-desktop:text-[18px]" />
+                    <Text
+                      as="p"
+                      html={item.credits}
+                      size={2}
+                      className="ml-[4px] mt-[6px] text-[18px] l:text-[14px]"
+                    />
                   </div>
                 </div>
 
@@ -184,7 +198,7 @@ export const CreditsWaysToGetCredits = ({ copy, classNames, id }: CreditsWaysToG
                 style={{ background: 'linear-gradient(180deg, rgba(29, 29, 31, 0) 66.37%, #1D1D1F 100%)' }}
               ></div>
             )}
-          </motion.div>
+          </div>
           {showMore ? (
             <button
               className="mx-auto mt-[12px] block w-fit min-md:hidden"

package/src/components/credits/modal/MyRewardsModal.tsx

@@ -9,7 +9,8 @@ import { CreditsModalContainer, type ModalContainerProps } from './modalContaine
 import Tip from './tip'
 import LoadingDots from './loadingDots'
 import useMyRewards from '../context/hooks/useMyRewards'
-import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { useHeadlessContext } from '@anker-in/lib'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 export interface MyRewardsMetafields {
   title: string

package/src/components/credits/modal/activitiesModal.tsx

@@ -4,10 +4,11 @@ import { CreditType, DTC_TASK_TYPE, TaskSubType, TaskType } from '../context/con
 import useActivities from '../context/hooks/useActivities'
 import type { Task } from '../context/response'
 import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
-import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'
 import LoadingDots from './loadingDots'
 import { Picture, Text } from '@anker-in/headless-ui'
+import { ROUNDED_BRANDS } from '../../../constants'
 import dayjs from 'dayjs'
 
 export interface MyActivitiesMetafields {

package/src/components/credits/modal/creditsUploadReceiptModal.tsx

@@ -2,8 +2,9 @@ import { Button, Heading, Text } from '@anker-in/headless-ui'
 import { useCallback, useState } from 'react'
 import { CreditsModalContainer } from './modalContainer'
 import { useUploadReceipt } from '../context/hooks/useUploadReceipt'
-import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { useHeadlessContext } from '@anker-in/lib'
 import classNames from 'classnames'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 export type ReceiptCopy = {
   title: string

package/src/components/credits/modal/modalContainer.tsx

@@ -1,6 +1,7 @@
-import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { useEffect, useState, type UIEvent } from 'react'
 import ReactModal from 'react-modal'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 export type ModalContainerProps = {
   overlayClassName?: string

package/src/components/credits/modal/subscribeModal.tsx

@@ -1,11 +1,12 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { Button, Checkbox, Picture, Text } from '@anker-in/headless-ui'
-import { classNames, fetcher, gaTrack, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { classNames, fetcher, gaTrack, useHeadlessContext } from '@anker-in/lib'
 import Cookies from 'js-cookie'
 import { parse } from 'query-string'
 import sha256 from 'crypto-js/sha256'
 import { useCreditsContext } from '../context/provider'
+import { ROUNDED_BRANDS } from '../../../constants'
 import { emailValidate } from '../context/utils'
 import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
 

package/src/components/credits/modal/tip.tsx

@@ -1,6 +1,7 @@
-import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { useHeadlessContext } from '@anker-in/lib'
 import classNames from 'classnames'
 import { useState } from 'react'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 function Tip({ info, index }: { info: string; index: number }) {
   const [show, setShow] = useState(false)

package/src/components/index.ts

@@ -9,6 +9,28 @@ export {
   useCopilotReadable,
 } from './chat/utils'
 
-export * from './credits/index'
+export * from './credits/index.js'
 
 export * from './registration/index'
+
+
+// LiveChatWidget 导出
+export { LiveChatWidget } from './LiveChatWidget/index.js'
+export type {
+  LiveChatWidgetProps,
+  Message,
+  MessageContent,
+  MessageRole,
+  MessageContentType,
+  MessageMetadata,
+  MessageRenderer,
+  QuickReply,
+  ProductCardContent,
+  ProductListContent,
+  PolicyContent,
+  QuickRepliesContent,
+  ThinkingContent,
+  ErrorContent,
+  SSEEvent,
+  ChatStreamRequest,
+} from './LiveChatWidget/index.js'