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

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/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'
 
@@ -13,19 +13,22 @@ import { RedeemableItem } from './RedeemableItem'
 import RulesModal from '../modal/rulesModal'
 import { CreditsRedeemListCopy } from './type'
 import { useRegistration } from '../../../components/registration'
+import { numberFormat } from '../context/utils'
 
-export const CreditsRedeemList = ({ copy }: { copy: CreditsRedeemListCopy }) => {
+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)
 
@@ -62,6 +65,8 @@ export const CreditsRedeemList = ({ copy }: { copy: CreditsRedeemListCopy }) =>
         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),
@@ -83,9 +88,18 @@ export const CreditsRedeemList = ({ copy }: { copy: CreditsRedeemListCopy }) =>
   )
 
   return (
-    <Container className={classNames('relative bg-[#F5F5F7]')}>
+    <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 ? 'rounded' : 'square'}
         align="left"

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

@@ -6,7 +6,7 @@ type ErrorProps = {
 
 export const Error = ({ errorInfo }: ErrorProps) => {
   return (
-    <div className="mx-auto max-w-[404px] text-[16px] text-black/40">
+    <div className="mx-auto max-w-[404px] text-[16px] text-black/40 py-[56px]">
       <Picture className="mx-auto mb-[12px] h-[140px] w-[220px]" source={errorInfo.imageUrl} />
       <Text as="div" className="mt-[16px] text-center" html={errorInfo.message} />
     </div>

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

@@ -1,5 +1,6 @@
 export type CreditsRedeemListCopy = {
   title: string
+  availableCredits: string
   unlockRewards: string
   btnRedeem: string
   list: {

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

@@ -11,7 +11,7 @@ import { useRegistration } from '../../registration'
 import { CreditsUploadReceiptModal } from '../modal/creditsUploadReceiptModal'
 import { CreditsSubscribeModal } from '../modal/subscribeModal'
 
-export const CreditsWaysToGetCredits = ({ copy, classNames }: CreditsWaysToGetCreditsProps) => {
+export const CreditsWaysToGetCredits = ({ copy, classNames, id }: CreditsWaysToGetCreditsProps & { id?: string }) => {
   const [showMore, setShowMore] = useState(false)
   const { profile } = useCreditsContext()
   const { authCodeActivate } = useRegistration()
@@ -91,7 +91,7 @@ export const CreditsWaysToGetCredits = ({ copy, classNames }: CreditsWaysToGetCr
   }, [actions, copy.list, isLogin])
 
   return (
-    <Container id="ways-to-get-credits" className=" bg-[#F5F5F7] [&>div]:l:!px-0">
+    <Container id={id} className=" bg-[#F5F5F7] [&>div]:l:!px-0">
       <div
         className={cn(
           'rounded-[16px] bg-[#1D1D1F] py-[64px] px-[140px] text-white md:px-[16px] l:rounded-none md-l:px-[32px] l-xl:px-[77px]',

package/src/templates/{credits.tsx → Credits.tsx}

@@ -4,23 +4,30 @@ import { RegistrationProvider } from '../components/registration/context/provide
 import { DTC_TASK_TYPE } from '../components/credits/context/const'
 import { CreditsProvider } from '../components/credits/context/provider'
 import { CreditsPageCommon } from '../components/credits/type'
+import { FunctionMemberPriceConfig } from '../components/credits/context/memberPriceTypes'
 
 import { CreditsBanner, CreditsBannerCopy } from '../components/credits/creditsBanner'
 import { CreditsInfoCard, CreditsInfoCardCopy } from '../components/credits/creditsInfoCard'
 import { CreditsBenefits, CreditsBenefitsCopy } from '../components/credits/creditsBenefits'
 import { CreditsWaysToGetCredits, CreditsWaysToGetCreditsCopy } from '../components/credits/creditsWaysToGetCredits'
+import { CreditsAnkersolixTask, CreditsAnkersolixTaskCopy } from '../components/credits/creditsAnkersolixTask'
 import { CreditsRedeemList, CreditsRedeemListCopy } from '../components/credits/creditsRedeemList'
 import { CreditsCash, CreditsCashCopy } from '../components/credits/creditsCash'
+import { CreditsMemberPrice, CreditsMemberPriceCopy } from '../components/credits/creditsMemberPrice'
 import { CreditsFaq, CreditsFaqCopy } from '../components/credits/creditsFaq'
+import { CreditsNavigation, CreditsNavigationCopy } from '../components/credits/creditsNavigation'
 import { AuthCodeActivateCopy } from 'src/components/registration/authCodeActivate/type'
 
 export enum ComponentKey {
+  Navigation = 'creditsNavigation',
   Banner = 'creditsBanner',
   InfoCard = 'creditsInfoCard',
   Benefits = 'creditsBenefits',
   WaysToGetCredits = 'creditsWaysToGetCredits',
+  AnkersolixTask = 'creditsAnkersolixTask',
   RedeemList = 'creditsRedeemList',
   SpendCreditsLikeCash = 'creditsCash',
+  MemberPrice = 'creditsMemberPrice',
   Faqs = 'creditsFaq',
 }
 export type CreditsTemplateProps = {
@@ -30,17 +37,24 @@ export type CreditsTemplateProps = {
       authCodeActivate: AuthCodeActivateCopy
     }
     taskIdToTypeMapping: Record<string, DTC_TASK_TYPE>
+    memberPriceDiscount?: FunctionMemberPriceConfig[]
+  }
+  creditsConfig?: {
+    alpcBrand?: string
   }
   pageConfig: {
     order: ComponentKey[]
     common: CreditsPageCommon
     components: {
+      [ComponentKey.Navigation]?: CreditsNavigationCopy
       [ComponentKey.Banner]?: CreditsBannerCopy
       [ComponentKey.InfoCard]?: CreditsInfoCardCopy
       [ComponentKey.Benefits]?: CreditsBenefitsCopy
       [ComponentKey.WaysToGetCredits]?: CreditsWaysToGetCreditsCopy
+      [ComponentKey.AnkersolixTask]?: CreditsAnkersolixTaskCopy
       [ComponentKey.RedeemList]?: CreditsRedeemListCopy
       [ComponentKey.SpendCreditsLikeCash]?: CreditsCashCopy
+      [ComponentKey.MemberPrice]?: CreditsMemberPriceCopy
       [ComponentKey.Faqs]?: CreditsFaqCopy
     }
   }
@@ -65,11 +79,14 @@ export type CreditsTemplateProps = {
 export const CreditsTemplate = ({
   headlessConfig,
   siteConfig,
+  creditsConfig,
   userContext,
   pageConfig,
   registrationContext,
   gtm,
 }: CreditsTemplateProps) => {
+
+  console.log('siteConfig', siteConfig)
   return (
     <HeadlessProvider headlessConfig={headlessConfig}>
       <RegistrationProvider copy={siteConfig.registrationsSettings} email={userContext?.profile?.email}>
@@ -86,21 +103,30 @@ export const CreditsTemplate = ({
           customerLoading={userContext?.customerLoading}
           gtm={gtm}
           pageCommon={pageConfig.common}
+          memberPriceDiscount={siteConfig.memberPriceDiscount}
+          alpcBrand={creditsConfig?.alpcBrand}
         >
+          {/* 导航组件 - 固定位置，不参与 order 排序 */}
+          {pageConfig.components[ComponentKey.Navigation] && (
+            <CreditsNavigation copy={pageConfig.components[ComponentKey.Navigation]} />
+          )}
           <div className={classNames('bg-[#f5f5f7] leading-[1.2]')}>
             {pageConfig.order.map(key => {
+              // 跳过导航组件，因为它已经固定渲染在上方
+              if (key === ComponentKey.Navigation) return null
               const componentCopy = pageConfig.components?.[key]
               if (!componentCopy) return null
               return (
                 <>
-                  {key === ComponentKey.Banner && <CreditsBanner copy={componentCopy as CreditsBannerCopy} />}
+                  {key === ComponentKey.Banner && <CreditsBanner copy={componentCopy as CreditsBannerCopy} id={key} />}
                   {key === ComponentKey.InfoCard && userContext?.profile && (
-                    <CreditsInfoCard copy={componentCopy as CreditsInfoCardCopy} />
+                    <CreditsInfoCard copy={componentCopy as CreditsInfoCardCopy} id={key} />
                   )}
-                  {key === ComponentKey.Benefits && <CreditsBenefits copy={componentCopy as CreditsBenefitsCopy} />}
+                  {key === ComponentKey.Benefits && <CreditsBenefits copy={componentCopy as CreditsBenefitsCopy} id={key} />}
                   {key === ComponentKey.WaysToGetCredits && (
                     <CreditsWaysToGetCredits
                       copy={componentCopy as CreditsWaysToGetCreditsCopy}
+                      id={key}
                       classNames={
                         headlessConfig.brand === 'anker'
                           ? {
@@ -115,11 +141,16 @@ export const CreditsTemplate = ({
                       }
                     />
                   )}
-                  {key === ComponentKey.RedeemList && (
-                    <CreditsRedeemList copy={componentCopy as CreditsRedeemListCopy} />
+                  {key === ComponentKey.AnkersolixTask && (
+                    <CreditsAnkersolixTask
+                      copy={componentCopy as CreditsAnkersolixTaskCopy}
+                      id={key}
+                    />
                   )}
-                  {key === ComponentKey.SpendCreditsLikeCash && <CreditsCash copy={componentCopy as CreditsCashCopy} />}
-                  {key === ComponentKey.Faqs && <CreditsFaq copy={componentCopy as CreditsFaqCopy} />}
+                  {key === ComponentKey.RedeemList && <CreditsRedeemList copy={componentCopy as CreditsRedeemListCopy} id={key} />}
+                  {key === ComponentKey.SpendCreditsLikeCash && <CreditsCash copy={componentCopy as CreditsCashCopy} id={key} />}
+                  {key === ComponentKey.MemberPrice && <CreditsMemberPrice copy={componentCopy as CreditsMemberPriceCopy} id={key} />}
+                  {key === ComponentKey.Faqs && <CreditsFaq copy={componentCopy as CreditsFaqCopy} id={key} />}
                   {key !== ComponentKey.Banner && (
                     <div className="laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16" />
                   )}

package/src/templates/index.ts

@@ -1 +1 @@
-export * from './credits'
+export * from './Credits'

package/dist/cjs/components/credits/const.d.ts

@@ -1 +0,0 @@
-export declare const roundedBrands: string[];

package/dist/cjs/components/credits/const.js

@@ -1,2 +0,0 @@
-"use strict";var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var t=Object.prototype.hasOwnProperty;var a=(d,o)=>{for(var n in o)r(d,n,{get:o[n],enumerable:!0})},f=(d,o,n,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of c(o))!t.call(d,e)&&e!==n&&r(d,e,{get:()=>o[e],enumerable:!(s=u(o,e))||s.enumerable});return d};var p=d=>f(r({},"__esModule",{value:!0}),d);var y={};a(y,{roundedBrands:()=>x});module.exports=p(y);const x=["eufy","soundcore"];
-//# sourceMappingURL=const.js.map

package/dist/cjs/components/credits/const.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/components/credits/const.ts"],
-  "sourcesContent": ["export const roundedBrands = ['eufy', 'soundcore']\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,IAAA,eAAAC,EAAAH,GAAO,MAAME,EAAgB,CAAC,OAAQ,WAAW",
-  "names": ["const_exports", "__export", "roundedBrands", "__toCommonJS"]
-}

package/dist/esm/components/credits/const.d.ts

@@ -1 +0,0 @@
-export declare const roundedBrands: string[];

package/dist/esm/components/credits/const.js

@@ -1,2 +0,0 @@
-const o=["eufy","soundcore"];export{o as roundedBrands};
-//# sourceMappingURL=const.js.map

package/dist/esm/components/credits/const.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/components/credits/const.ts"],
-  "sourcesContent": ["export const roundedBrands = ['eufy', 'soundcore']\n"],
-  "mappings": "AAAO,MAAMA,EAAgB,CAAC,OAAQ,WAAW",
-  "names": ["roundedBrands"]
-}