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

package/src/components/credits/creditsAnkersolixTask/CreditsAnkersolixTask.tsx

@@ -0,0 +1,270 @@
+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 { TaskType, type CreditsAnkersolixTaskProps } from './type'
+import { useActions } from '../creditsWaysToGetCredits/useActions'
+import { useCreditsContext } from '../context/provider'
+import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { useRegistration } from '../../registration'
+import { CreditsUploadReceiptModal } from '../modal/creditsUploadReceiptModal'
+import { CreditsSubscribeModal } from '../modal/subscribeModal'
+
+export const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersolixTaskProps & { id?: string }) => {
+  const [showMore, setShowMore] = useState(false)
+  const { profile } = useCreditsContext()
+  const { authCodeActivate } = useRegistration()
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+  const isLogin = !!profile
+
+  const [isUploadReceiptModalOpen, setIsUploadReceiptModalOpen] = useState(false)
+  const [isSubscribeModalOpen, setIsSubscribeModalOpen] = useState(false)
+  const [isSubscribeSuccess, setIsSubscribeSuccess] = useState(false)
+  const [isUploadReceiptSuccess, setIsUploadReceiptSuccess] = useState(false)
+
+  const { actions } = useActions({
+    copy,
+    subscribe: {
+      openSubscribePopup: () => setIsSubscribeModalOpen(true),
+      isSuccess: isSubscribeSuccess,
+    },
+    uploadReceipt: {
+      openUploadReceiptPopup: () => setIsUploadReceiptModalOpen(true),
+      isSuccess: isUploadReceiptSuccess,
+    },
+  })
+  const list = useMemo(() => {
+    const list = copy.list
+      .map(item => {
+        if (!actions[item.id as keyof typeof actions]) {
+          return undefined
+        }
+        const { finished, notLogin, notFinished, completed } = actions[item.id as keyof typeof actions]
+        let buttonLabel = ''
+        let handleClick = undefined
+        let link = undefined
+        if (!isLogin) {
+          buttonLabel = notLogin.buttonLabel
+          handleClick = notLogin.handleClick
+        } else if (finished) {
+          buttonLabel = completed.buttonLabel
+          handleClick = undefined
+        } else {
+          buttonLabel = notFinished.buttonLabel
+          handleClick = notFinished.handleClick
+          link = (notFinished as { link: string }).link
+        }
+        return {
+          ...item,
+          buttonLabel,
+          handleClick,
+          finished,
+          link,
+        }
+      })
+      .filter(Boolean) as {
+      title: string
+      credits: string
+      id: TaskType
+      buttonLabel: string
+      finished: boolean
+      link: string
+      handleClick: (() => void) | undefined
+    }[]
+
+    // 登录后，保留原顺序，将已完成的任务放在最后
+    if (isLogin) {
+      return list.sort((a, b) => {
+        if (a?.finished && !b?.finished) {
+          return 1 // a已完成，b未完成，a排在后面
+        }
+        if (!a?.finished && b?.finished) {
+          return -1 // a未完成，b已完成，a排在前面
+        }
+        return 0 // 都已完成或都未完成，保持原顺序
+      })
+    } else {
+      return list
+    }
+  }, [actions, copy.list, isLogin])
+
+  // 只有大于3个任务时才显示蒙层
+  const shouldShowMask = list.length > 3
+
+  return (
+    <Container id={id} className="[&>div]:l:!px-0 bg-[#F5F5F7]">
+      <Heading as="h2" size="4" html={copy.title} className='md:px-[16px]'/>
+      <div
+        className={cn(
+          'mt-[24px] p-[32px] md-l:p-[32px] md:p-[16px] relative overflow-hidden',
+          rounded ? 'rounded-[8px]' : '',
+          !rounded && 'l:rounded-none'
+        )}
+        style={{
+          background: 'linear-gradient(180deg, rgba(255, 241, 214, 0) 39.51%, #F4CA81 119.53%)',
+        }}
+      >
+        {/* 径向渐变背景层 - 使用伪元素模拟 */}
+        <div
+          className="absolute inset-0 pointer-events-none -z-10"
+          style={{
+            background: 'radial-gradient(ellipse 130% 205% at 45% -20%, #FFF6EA 0%, #FFFFFF 73%, #FFF1D6 100%)',
+          }}
+        />
+        {/* 副标题和装饰图部分 */}
+        <div className="flex items-center justify-between h-[560px] md:h-auto md:flex-col md:items-start l:h-auto l:mb-[16px] l:flex-col-reverse l:items-start">
+          <div className="flex flex-col gap-[8px]">
+            <Heading
+              as="h3"
+              size={4}
+              html={copy?.subtitle}
+              className="text-[32px] font-bold text-[#080a0f] tracking-[-1.28px] leading-[1.2] xl:text-[24px]"
+            />
+            <div className="flex items-center gap-[8px]">
+              <p
+                className="text-[48px] font-bold tracking-[-1.92px] leading-none bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-43% to-[#00db84] bg-clip-text text-transparent xl-xxl:text-[40px] l-xl:text-[32px] l:text-[24px]"
+                dangerouslySetInnerHTML={{ __html: copy.equalCredits }}
+              />
+            </div>
+          </div>
+          {copy.mainImage?.url && (
+            <Picture className="w-full max-w-[50%] md:max-w-full md:mt-[24px] l:max-w-full l:mt-[24px]" source={copy.mainImage.url} />
+          )}
+        </div>
+
+        {/* 卡片列表 */}
+        <div className="relative">
+          <motion.div
+            className={cn(
+              'grid grid-cols-3 gap-[16px] overflow-hidden md:grid-cols-1 md-l:grid-cols-2 min-md:!h-auto'
+            )}
+            initial={{ height: shouldShowMask ? 512 : 'auto' }}
+            animate={{ height: showMore || !shouldShowMask ? 'auto' : 512 }}
+            transition={{ duration: 0.3 }}
+            onAnimationComplete={() => {
+              if (!showMore && shouldShowMask && window.screen.width < 768) {
+                const section = document.getElementById(id || 'ankersolix-task')
+                if (section) {
+                  section.scrollIntoView({ behavior: 'smooth', block: 'end' })
+                }
+              }
+            }}
+          >
+            {list.map(item => (
+              <div
+                key={item.id}
+                className={cn(
+                  'flex min-h-[241px] xl-xxl:min-h-[192px] l:min-h-[160px] l-xl:min-h-[170px] flex-col justify-between bg-white p-[32px] md:p-[16px] l:p-[24px]',
+                  rounded ? '' : ''
+                )}
+              >
+                <div>
+                  <Heading
+                    as="h4"
+                    html={item.title}
+                    size={2}
+                    className="text-[24px] font-bold text-[#080a0f] tracking-[-0.96px] leading-[1.2] text-pretty md:text-[18px] l:text-[20px]"
+                  />
+                  <div className="mt-[8px] flex items-center gap-[4px]">
+                    <Picture
+                      className="size-[24px] [&_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="text-[18px] font-bold text-[#080a0f] tracking-[-0.36px] leading-[1.4] md:text-[16px]"
+                    />
+                  </div>
+                </div>
+
+                {item.handleClick &&
+                !(item.id === TaskType.UploadReceipt && isUploadReceiptSuccess) &&
+                !(item.id === TaskType.Activate && authCodeActivate.isActivateSuccess) &&
+                !(item.id === TaskType.Subscribe && isSubscribeSuccess) ? (
+                  <Button
+                    as={item.link ? 'a' : 'button'}
+                    {...(item.link && { href: item.link })}
+                    {...(item.handleClick && { onClick: item.handleClick })}
+                    variant="primary"
+                    size="lg"
+                    className="mt-[24px] w-fit bg-[#080a0f] text-white text-[16px] font-bold tracking-[-0.64px] leading-[1.2]"
+                  >
+                    {item.buttonLabel}
+                  </Button>
+                ) : (
+                  <Button
+                    variant="primary"
+                    size="lg"
+                    className="mt-[24px] w-fit bg-[#080a0f] text-white text-[16px] font-bold tracking-[-0.64px] leading-[1.2]"
+                    disabled
+                  >
+                    {item.buttonLabel}
+                  </Button>
+                )}
+              </div>
+            ))}
+            {!showMore && shouldShowMask && (
+              <div
+                className="absolute inset-0 pointer-events-none min-md:hidden"
+                style={{ background: 'linear-gradient(180deg, rgba(244, 202, 129, 0) 66.37%, #f4ca81 100%)' }}
+              ></div>
+            )}
+          </motion.div>
+          {shouldShowMask && (
+            <>
+              {showMore ? (
+                <button
+                  className="mx-auto mt-[12px] block w-fit min-md:hidden"
+                  onClick={() => {
+                    setShowMore(false)
+                  }}
+                >
+                  <ChevronUpIcon className="size-[40px] rounded-full bg-[#FFFFFF33] p-[8px]"></ChevronUpIcon>
+                </button>
+              ) : (
+                <>
+                  <div className="absolute bottom-0 flex w-full translate-y-1/2 justify-center min-md:hidden">
+                    <button className="w-fit" onClick={() => setShowMore(!showMore)}>
+                      <ChevronDownIcon className="size-[40px] rounded-full bg-[#FFFFFF33] p-[8px]"></ChevronDownIcon>
+                    </button>
+                  </div>
+                </>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+      {copy.receipt && (
+        <CreditsUploadReceiptModal
+          isOpen={isUploadReceiptModalOpen}
+          onClose={() => {
+            setIsUploadReceiptModalOpen(false)
+          }}
+          copy={copy.receipt}
+          onSuccess={() => {
+            setIsUploadReceiptSuccess(true)
+          }}
+        />
+      )}
+      {copy.subscribe && (
+        <CreditsSubscribeModal
+          copy={copy.subscribe}
+          onSuccess={() => {
+            setIsSubscribeSuccess(true)
+            setTimeout(() => {
+              setIsSubscribeModalOpen(false)
+            }, 3000)
+          }}
+          isOpen={isSubscribeModalOpen}
+          onClose={() => {
+            setIsSubscribeModalOpen(false)
+          }}
+        />
+      )}
+    </Container>
+  )
+}

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

@@ -0,0 +1,2 @@
+export * from './type'
+export * from './CreditsAnkersolixTask'

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

@@ -0,0 +1,7 @@
+// 直接引用旧组件的类型
+export {
+  type BenefitItem,
+  type CreditsWaysToGetCreditsCopy as CreditsAnkersolixTaskCopy,
+  type CreditsWaysToGetCreditsProps as CreditsAnkersolixTaskProps,
+  TaskType,
+} from '../creditsWaysToGetCredits/type'

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

@@ -6,25 +6,23 @@ type Img = {
   url: string
   alt: string
 }
-type BannerProps = {
-  copy: {
-    pcImg: Img
-    laptopImg: Img
-    mobileImg: Img
-    joinNow: string
-    loginIn: string
-    login: {
-      title: string
-      description: string
-    }
-    unLogin: {
-      title: string
-      description: string
-    }
+export type CreditsBannerCopy = {
+  pcImg: Img
+  laptopImg: Img
+  mobileImg: Img
+  joinNow: string
+  loginIn: string
+  login: {
+    title: string
+    description: string
+  }
+  unLogin: {
+    title: string
+    description: string
   }
 }
 
-export function CreditsBanner({ copy }: BannerProps) {
+export function CreditsBanner({ copy, id }: { copy: CreditsBannerCopy; id?: string }) {
   const { profile, openSignInPopup, openSignUpPopup } = useCreditsContext()
   const isLogin = profile ? Object.keys(profile).length !== 0 : false
 
@@ -38,7 +36,7 @@ export function CreditsBanner({ copy }: BannerProps) {
 
   return (
     <>
-      <div className=" relative w-full">
+      <div id={id} className=" relative w-full">
         <Picture
           className="aspect-h-[804] aspect-w-[1920] md:aspect-h-[660] md:aspect-w-[390] md-l:aspect-h-[660] md-l:aspect-w-[768]"
           source={`${copy.pcImg?.url}, ${copy.laptopImg?.url} 1024, ${copy.mobileImg?.url} 768`}
@@ -56,7 +54,7 @@ export function CreditsBanner({ copy }: BannerProps) {
 
         <Container className="l:h-auto !absolute inset-0 mx-auto grid h-full" asChild>
           <div className="grid grid-cols-12">
-            <div className="l:col-span-12 l:justify-start l:pt-[64px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]">
+            <div className="l:col-span-12 l:justify-start l:truncate l:pt-[64px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]">
               <Heading
                 as="h1"
                 size="5"

package/src/components/credits/creditsBenefits/BenefitItem.tsx

@@ -0,0 +1,107 @@
+import { Heading, Picture, Text } from '@anker-in/headless-ui'
+import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import IconInfo from './IconInfo'
+
+export interface BenefitItemCopy {
+  icon: {
+    alt: string
+    url: string
+  }
+  text: string
+  note?: string
+  tag?: string
+}
+const BenefitItem = ({
+  item,
+  handleClick,
+  isNoteActive,
+  index,
+  bigIcon,
+  cardBgColor,
+  cardBorderColor,
+}: {
+  item: BenefitItemCopy
+  handleClick: ({ item, index }: { item: BenefitItemCopy; index: number }) => void
+  isNoteActive: boolean
+  index: number
+  bigIcon?: boolean
+  cardBgColor?: string
+  cardBorderColor?: string
+}) => {
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
+  // 根据 bigIcon 设置不同屏幕下的图标大小
+  // 尺寸：≥1921px=64px, 1441-1920px=54px, ≤1440px=48px
+  const iconSizeClass = bigIcon
+    ? 'mb-[16px] size-[64px] xl-xxl:size-[54px] xl:size-[48px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0'
+    : 'mb-[16px] size-[31px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0'
+
+  console.log('cardBgColor in BenefitItem', cardBgColor)
+  // 背景色和边框色处理
+  const cardStyle: React.CSSProperties = {}
+  if (cardBgColor) {
+    cardStyle.background = cardBgColor
+  } else {
+    cardStyle.background = 'linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)'
+  }
+  if (cardBorderColor) {
+    cardStyle.borderColor = cardBorderColor
+  }
+
+  return (
+    <div
+      className={cn(
+        'relative flex-1 flex flex-col rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]',
+        !rounded && 'rounded-none'
+      )}
+      style={cardStyle}
+    >
+      <div className="flex flex-col">
+        <Picture className={iconSizeClass} alt={item.icon?.alt} source={item.icon?.url} />
+        <div className="flex items-center">
+          <Heading html={item.text} size="2" className="break-all" />
+          {item.note && (
+            <div
+              role="button"
+              tabIndex={0}
+              onKeyDown={e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault()
+                }
+              }}
+              className="relative mb-1 ml-[4px]"
+              onClick={() => handleClick({ item, index })}
+            >
+              <IconInfo />
+              <div
+                className={cn(
+                  'absolute -bottom-[12px] left-[32px] z-10 w-[356px] -translate-x-full translate-y-full md:w-[276px]',
+                  isNoteActive ? 'block' : 'hidden'
+                )}
+              >
+                <div
+                  className={cn(
+                    'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow',
+                    !rounded && 'rounded-none'
+                  )}
+                >
+                  <Text as="p" size="2" html={item.note} className="desktop:text-[18px]" />
+                  <div
+                    className={cn(
+                      'absolute -top-[10px] right-[9px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]',
+                      !rounded && 'rounded-none'
+                    )}
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+        {item.tag && <Text as="div" html={item.tag} className="mt-[2px] text-[16px] font-bold text-[#6D6D6F]" />}
+      </div>
+    </div>
+  )
+}
+
+export default BenefitItem

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

@@ -7,22 +7,21 @@ import { useState } from 'react'
 import { Grid, Pagination } from 'swiper/modules'
 import { Swiper, SwiperSlide } from 'swiper/react'
 
-import BenefitItem, { type BenefitItemCopy } from './benefitItem'
+import BenefitItem, { type BenefitItemCopy } from './BenefitItem'
 import { useCreditsContext } from '../context/provider'
-import { gaTrack } from '../../../helpers/track'
-import { cn } from '../../../helpers/utils'
+import { gaTrack, classNames as cn } from '@anker-in/lib'
 
-interface CreditsBenefitsProps {
-  copy: {
-    title: string
-    benefits: BenefitItemCopy[]
-  }
+export type CreditsBenefitsCopy = {
+  title: string
+  benefits: BenefitItemCopy[]
+  bigIcon?: boolean
+  cardBgColor?: string
+  cardBorderColor?: string
 }
 
-export const CreditsBenefits = ({ copy }: CreditsBenefitsProps) => {
+export const CreditsBenefits = ({ copy, id }: { copy: CreditsBenefitsCopy; id?: string }) => {
   const [activeNoteIndex, setActiveNoteIndex] = useState<number | null>(null)
   const { profile, gtm } = useCreditsContext()
-
   const handleClick = ({ item, index }: { item: BenefitItemCopy; index: number }) => {
     gaTrack({
       event: 'ga4Event',
@@ -46,9 +45,9 @@ export const CreditsBenefits = ({ copy }: CreditsBenefitsProps) => {
   }
 
   return (
-    <Container id="benefits" className="!z-[30] bg-[#F5F5F7]">
+    <Container id={id} className="!z-[30] bg-[#F5F5F7]">
       <Heading as="h2" size="4" html={copy?.title} />
-      <div className="mt-[24px] grid grid-cols-2 gap-[16px] l:hidden min-md:grid-cols-3 min-xl:grid-cols-4">
+      <div className="mt-[24px] grid grid-cols-4 xl:grid-cols-3 gap-[16px] l:hidden items-stretch">
         {copy.benefits.map((item, index) => (
           <BenefitItem
             key={index}
@@ -56,6 +55,9 @@ export const CreditsBenefits = ({ copy }: CreditsBenefitsProps) => {
             handleClick={handleClick}
             isNoteActive={activeNoteIndex === index}
             index={index}
+            bigIcon={copy.bigIcon}
+            cardBgColor={copy.cardBgColor}
+            cardBorderColor={copy.cardBorderColor}
           />
         ))}
       </div>
@@ -74,24 +76,27 @@ export const CreditsBenefits = ({ copy }: CreditsBenefitsProps) => {
               slidesPerGroup: 3,
             },
           }}
-          wrapperClass="items-stretch"
+          wrapperClass="!items-stretch"
           modules={[Grid, Pagination]}
           pagination={{
             clickable: true,
             el: '#benefits-pagination',
             renderBullet(index, className) {
-              return `<div class='${className}  !flex justify-center size-[8px] rounded-full bg-[#D9D9D9] cursor-pointer items-center'>
+              return `<div class='${className} !flex justify-center size-[8px] rounded-full bg-[#D9D9D9] cursor-pointer items-center'>
               </div>`
             },
           }}
         >
           {copy.benefits.map((item, index) => (
-            <SwiperSlide key={index} className={cn('!h-auto', activeNoteIndex === index && '!z-[100]')}>
+            <SwiperSlide key={index} className={cn('!h-auto !flex', activeNoteIndex === index && '!z-[100]')}>
               <BenefitItem
                 item={item}
                 handleClick={handleClick}
                 isNoteActive={activeNoteIndex === index}
                 index={index}
+                bigIcon={copy.bigIcon}
+                cardBgColor={copy.cardBgColor}
+                cardBorderColor={copy.cardBorderColor}
               />
             </SwiperSlide>
           ))}

package/src/components/credits/creditsCash/CreditsCash.tsx

@@ -0,0 +1,84 @@
+import { Container, Heading, Text } from '@anker-in/headless-ui'
+import { useMemo, useState } from 'react'
+
+import RedeemableItem from './RedeemableItem'
+import useRedeemableList from '../context/hooks/useRedeemableList'
+import RulesModal from '../modal/rulesModal'
+import { useProductsByHandles } from '@anker-in/lib'
+import { CreditsCashCopy, RedeemItem } from './type'
+import { Product, classNames as cn } from '@anker-in/lib'
+import { useCreditsContext } from '../context/provider'
+import { numberFormat } from '../context/utils'
+
+export const CreditsCash = ({ copy, id }: { copy: CreditsCashCopy; id?: string }) => {
+  const [rules, setRules] = useState<string | string[]>()
+  const { redeemableList } = useRedeemableList()
+  const { pageCommon } = useCreditsContext()
+
+  const variantMetafieldIdentifiers: any[] = []
+
+  const { data: productByHandles } = useProductsByHandles({
+    handles: copy?.list?.map(item => item.products?.[0]?.handle) || [],
+    metafieldIdentifiers: {
+      variant: variantMetafieldIdentifiers,
+    },
+  })
+
+  const list = useMemo(() => {
+    return productByHandles
+      ?.map((product: Product) => {
+        const config = copy.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]
+        if (!alpcData || !productVariant) 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[]
+  }, [productByHandles, copy.list, redeemableList])
+
+  return (
+    <Container id={id} className={cn('bg-[#F5F5F5]')}>
+      <Heading as="h2" size="4" html={copy.title} />
+
+      <div className="relative mt-[24px] grid grid-cols-4 gap-[16px] l:gap-[12px] md:grid-cols-2 md-xl:grid-cols-3">
+        {list?.map((item, index: number) => (
+          <RedeemableItem
+            key={index}
+            copy={copy}
+            itemData={item}
+            setRules={setRules}
+            currencyCode={productByHandles?.[0]?.price.currencyCode || 'USD'}
+          />
+        ))}
+      </div>
+
+      {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>
+  )
+}