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

package/src/components/credits/context/memberPriceTypes.ts

@@ -1,18 +1,9 @@
-import { FunctionDiscountType, RoundSelected } from './memberPriceConst'
-
-// 价格结尾配置
-export type PriceEndingConf = {
-  apply_price_ending: boolean
-  one_decimal_place: string
-  two_decimal_place: string
-  round_selected: RoundSelected
-}
+import { FunctionDiscountType } from './memberPriceConst'
 
 // 折扣配置
 export type DiscountConfig = {
   discount_type: FunctionDiscountType
   discount_value: number
-  price_ending_conf?: PriceEndingConf
 }
 
 // 会员价配置类型
@@ -36,19 +27,3 @@ export type FunctionMemberPriceConfig = {
     other_product_discounts: boolean
   }
 }
-
-// 会员价计算结果
-export type FunctionMemberPriceResult = {
-  hasMemberPrice: boolean
-  useCoupon: boolean
-  originalPrice: number
-  originalPriceWithCurrency: string
-  salePrice: number
-  salePriceWithCurrency: string
-  salePriceWithoutCoupon: number
-  salePriceWithoutCouponWithCurrency: string
-  savePrice: number
-  savePriceWithCurrency: string
-  savePriceWithoutCoupon: number
-  savePriceWithoutCouponWithCurrency: string
-}

package/src/components/credits/context/provider.tsx

@@ -21,6 +21,17 @@ type Context = {
   pageCommon: CreditsPageCommon
   memberPriceDiscount?: FunctionMemberPriceConfig[]
   alpcBrand?: string
+  cartConfig?: {
+    addToCart: (params: {
+      variantList: Array<{
+        variant: any
+        quantity: number
+        attributes?: Array<{ key: string; value: string }>
+      }>
+      cartAttributes?: Record<string, string>
+      discountCodes?: string[]
+    }) => void | Promise<any>
+  }
 }
 
 export const CreditsContext = createContext<Context>({
@@ -39,6 +50,7 @@ export const CreditsContext = createContext<Context>({
   pageCommon: {},
   memberPriceDiscount: undefined,
   alpcBrand: undefined,
+  cartConfig: undefined,
 })
 
 export function CreditsProvider({
@@ -57,6 +69,7 @@ export function CreditsProvider({
   pageCommon,
   memberPriceDiscount,
   alpcBrand,
+  cartConfig,
 }: PropsWithChildren<Context>) {
   return (
     <CreditsContext.Provider
@@ -75,6 +88,7 @@ export function CreditsProvider({
         pageCommon,
         memberPriceDiscount,
         alpcBrand,
+        cartConfig,
       }}
     >
       {children}

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

@@ -1,7 +1,6 @@
 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 { useMemo, useState, useRef, useEffect } from 'react'
 
 import { TaskType, type CreditsAnkersolixTaskProps } from './type'
 import { useActions } from '../creditsWaysToGetCredits/useActions'
@@ -36,6 +35,21 @@ export const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersoli
       isSuccess: isUploadReceiptSuccess,
     },
   })
+
+  const shouldShowMask = (copy?.list || []).length > 3
+
+  // Handle scroll after collapse animation
+  useEffect(() => {
+    if (!showMore && shouldShowMask && window.screen.width < 768) {
+      const timer = setTimeout(() => {
+        const section = document.getElementById(id || 'ankersolix-task')
+        if (section) {
+          section.scrollIntoView({ behavior: 'smooth', block: 'end' })
+        }
+      }, 300) // Match transition duration
+      return () => clearTimeout(timer)
+    }
+  }, [showMore, shouldShowMask, id])
   const list = useMemo(() => {
     const list = copy.list
       .map(item => {
@@ -91,9 +105,6 @@ export const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersoli
     }
   }, [actions, copy.list, isLogin])
 
-  // 只有大于3个任务时才显示蒙层
-  const shouldShowMask = list.length > 3
-
   return (
     <Container id={id} className="bg-[#F5F5F7]">
       <Heading as="h2" size="4" html={copy.title} />
@@ -141,18 +152,12 @@ export const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersoli
 
         {/* 卡片列表 */}
         <div className="relative mt-[24px]">
-          <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' })
-                }
-              }
+          <div
+            className={cn(
+              'grid grid-cols-3 gap-[16px] overflow-hidden md:grid-cols-1 md-l:grid-cols-2 min-md:!h-auto transition-all duration-300 ease-in-out'
+            )}
+            style={{
+              height: showMore || !shouldShowMask ? 'auto' : '512px',
             }}
           >
             {list.map(item => (
@@ -194,17 +199,12 @@ export const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersoli
                     {...(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]"
+                    className="mt-[24px] w-fit"
                   >
                     {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
-                  >
+                  <Button variant="primary" size="lg" className="mt-[24px] w-fit" disabled>
                     {item.buttonLabel}
                   </Button>
                 )}
@@ -216,7 +216,7 @@ export const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersoli
                 style={{ background: 'linear-gradient(180deg, rgba(244, 202, 129, 0) 66.37%, #f4ca81 100%)' }}
               ></div>
             )}
-          </motion.div>
+          </div>
           {shouldShowMask && (
             <>
               {showMore ? (

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

@@ -5,6 +5,8 @@ import { useCreditsContext } from '../context/provider'
 type Img = {
   url: string
   alt: string
+  width?: number
+  height?: number
 }
 export type CreditsBannerCopy = {
   pcImg: Img
@@ -34,15 +36,41 @@ export function CreditsBanner({ copy, id }: { copy: CreditsBannerCopy; id?: stri
     buttonType === 'primary' ? openSignUpPopup() : openSignInPopup()
   }
 
+  // 计算图片比例，如果没有配置则使用默认值
+  const pcAspectRatio =
+    copy.pcImg?.width && copy.pcImg?.height ? `${copy.pcImg.width} / ${copy.pcImg.height}` : '1920 / 804'
+  const laptopAspectRatio =
+    copy.laptopImg?.width && copy.laptopImg?.height ? `${copy.laptopImg.width} / ${copy.laptopImg.height}` : '768 / 660'
+  const mobileAspectRatio =
+    copy.mobileImg?.width && copy.mobileImg?.height ? `${copy.mobileImg.width} / ${copy.mobileImg.height}` : '390 / 660'
+
   return (
     <>
       <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]"
+          className="credits-banner-image w-full"
+          style={{
+            aspectRatio: pcAspectRatio,
+          }}
+          imgClassName="object-cover w-full h-full"
           source={`${copy.pcImg?.url}, ${copy.laptopImg?.url} 1024, ${copy.mobileImg?.url} 768`}
           alt={copy.pcImg?.alt}
           loading="eager"
         ></Picture>
+        <style>
+          {`
+            @media (max-width: 1024px) and (min-width: 768px) {
+              .credits-banner-image {
+                aspect-ratio: ${laptopAspectRatio} !important;
+              }
+            }
+            @media (max-width: 767px) {
+              .credits-banner-image {
+                aspect-ratio: ${mobileAspectRatio} !important;
+              }
+            }
+          `}
+        </style>
         {isLogin && (
           <div
             className="absolute inset-0 "
@@ -54,10 +82,11 @@ export function CreditsBanner({ copy, id }: { copy: CreditsBannerCopy; id?: stri
 
         <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:truncate 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-[32px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]">
               <Heading
                 as="h1"
                 size="5"
+                className="text-[48px] xl-xxl:text-[40px] l:text-[32px]"
                 html={isLogin ? copy.login.title?.replace('$name', displayName || '') : copy.unLogin.title}
               ></Heading>
 

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

@@ -29,13 +29,16 @@ const BenefitItem = ({
   cardBgColor?: string
   cardBorderColor?: string
 }) => {
-  const { brand } = useHeadlessContext()
+  const { brand, locale } = useHeadlessContext()
   const rounded = ROUNDED_BRANDS.includes(brand)
 
+  // 德语和法语需要折行
+  const shouldBreakWords = ['de', 'eu-de', 'fr', 'eu-fr'].includes(locale)
+
   // 根据 bigIcon 设置不同屏幕下的图标大小
-  // 尺寸：≥1921px=64px, 1441-1920px=54px, ≤1440px=48px
+  // 尺寸：≥1921px=64px, 1441-1920px=56px, 1025-1440px=20px, ≤1024px=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-[64px] xl-xxl:size-[56px] 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)
@@ -61,7 +64,11 @@ const BenefitItem = ({
       <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 md-l:line-clamp-3" />
+          <Heading
+            html={item.text}
+            size="2"
+            className={cn('md-l:line-clamp-3', shouldBreakWords && 'break-words')}
+          />
           {item.note && (
             <div
               role="button"

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

@@ -2,7 +2,7 @@ export const IconInfo = () => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      className='size-[18px] cursor-pointer [&_svg]:size-full'
+      className='size-[20px] cursor-pointer [&_svg]:size-full'
       width='18'
       height='18'
       viewBox='0 0 18 18'

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

@@ -27,7 +27,7 @@ export const CreditsCash = ({ copy, id }: { copy: CreditsCashCopy; id?: string }
   const list = useMemo(() => {
     return productByHandles
       ?.map((product: Product) => {
-        const config = copy.list.find(item => item.products?.[0]?.handle === product.handle)
+        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]

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

@@ -1,4 +1,4 @@
-import { Button, Text, Picture } from '@anker-in/headless-ui'
+import { Button, Text, Picture, Badge } from '@anker-in/headless-ui'
 import { useMemo, useState } from 'react'
 
 import { CreditsCashCopy, RedeemItem } from './type'
@@ -113,11 +113,24 @@ function RedeemableItem({
   return (
     <div
       className={cn(
-        'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] md:rounded-[12px] p-[24px] l:p-[8px] md-xl:p-[16px]',
+        'relative flex flex-col items-center rounded-[16px] bg-[#EAEAEC] md:rounded-[12px] p-[24px] l:p-[8px] md-xl:p-[16px]',
         !rounded && 'rounded-none md:rounded-none',
+        copy.badgeLabel && 'pt-[48px] l:pt-[44px]',
         className
       )}
     >
+      {/* Redeem 标签 Badge */}
+      {copy.badgeLabel && (
+        <Badge
+          className="absolute left-[24px] l:left-[16px] !bg-gradient-brand top-[16px] z-10"
+          size="lg"
+          variant="promotional"
+          promotionalType="regular-member"
+        >
+          {copy.badgeLabel}
+        </Badge>
+      )}
+
       <a
         href={
           extractVariantId(itemData.productVariant?.id)
@@ -141,7 +154,7 @@ function RedeemableItem({
           html={itemData?.product?.title}
           title={itemData.config?.title || itemData.alpcData?.title || itemData.product?.title}
           size={2}
-          className="line-clamp-2 h-[58px] text-[24px] l-xxl:text-[20px] l:text-[16px] leading-[1.2] l:h-[40px] l-xxl:h-[48px]"
+          className="line-clamp-2 h-[58px] text-[24px] l-xxl:text-[20px] l:text-[16px] leading-[1.2] l:h-[38px] l-xxl:h-[48px]"
         />
         {itemData?.config?.rules?.split('<br>')?.length > 0 && (
           <button
@@ -198,7 +211,7 @@ function RedeemableItem({
           />
         </div>
 
-        <div className="group relative w-full">
+        <div className="group relative w-full mt-[8px]">
           <Button
             disabled={isDisabled}
             variant="primary"

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

@@ -25,6 +25,7 @@ export type CreditsCashCopy = {
   unlockRewards: string
   btnRedeem: string
   off: string
+  badgeLabel?: string
 }
 
 export type RedeemItem = {

package/src/components/credits/creditsFaq/faqItem/FaqItem.tsx

@@ -1,7 +1,6 @@
 import { Heading, Text } from '@anker-in/headless-ui'
 import { ChevronDownIcon } from '@heroicons/react/24/outline'
 import { classNames as cn } from '@anker-in/lib'
-import { motion } from 'framer-motion'
 import { type ReactNode, useEffect, useState } from 'react'
 
 type FaqItemProps = {
@@ -67,29 +66,32 @@ export const FaqItem = ({
           />
         )}
       </div>
-      <motion.div
-        initial={false}
-        animate={{ height: !expanded ? 0 : 'auto' }}
-        className="overflow-hidden [&_td]:border [&_td]:border-[#333] [&_td]:px-[8px] [&_td]:py-[4px]"
-      >
-        {answer?.toString()?.includes('https://www.youtube.com') ? (
-          <Text
-            as="div"
-            className={cn('mt-[8px]')}
-            data-ratio="16:9"
-            data-content={answer}
-            html={answer?.toString()}
-          ></Text>
-        ) : (
-          <Text
-            as="div"
-            html={answer?.toString()}
-            className={cn(
-              'mt-[8px] text-[16px] font-bold leading-[1.5] text-[#3D3D3F] l:text-[14px] [&_a]:text-brand [&_a]:underline'
-            )}
-          ></Text>
+      <div
+        className={cn(
+          'grid transition-all duration-300 ease-in-out [&_td]:border [&_td]:border-[#333] [&_td]:px-[8px] [&_td]:py-[4px]',
+          expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
         )}
-      </motion.div>
+      >
+        <div className="overflow-hidden">
+          {answer?.toString()?.includes('https://www.youtube.com') ? (
+            <Text
+              as="div"
+              className={cn('mt-[8px]')}
+              data-ratio="16:9"
+              data-content={answer}
+              html={answer?.toString()}
+            ></Text>
+          ) : (
+            <Text
+              as="div"
+              html={answer?.toString()}
+              className={cn(
+                'mt-[8px] text-[16px] font-bold leading-[1.5] text-[#3D3D3F] l:text-[14px] [&_a]:text-brand [&_a]:underline'
+              )}
+            ></Text>
+          )}
+        </div>
+      </div>
     </div>
   )
 }

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

@@ -72,7 +72,7 @@ export function CreditsInfoCard({ copy, id }: { copy: CreditsInfoCardCopy; id?:
               {copy.balanceLabel}
             </div>
             <div className="flex items-baseline">
-              <div className={cn('mr-[8px] text-[36px] font-extrabold', 'min-md:text-[44px]', 'min-xl:text-[56px]')}>
+              <div className={cn('mr-[8px] text-[36px] font-extrabold text-brand-color-1', 'min-md:text-[44px]', 'min-xl:text-[56px]')}>
                 {creditInfo ? numberFormat(creditInfo.available_credit) : 0}
               </div>
               <div className="text-[16px]">{pageCommon?.pointUnit}</div>

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

@@ -25,12 +25,16 @@ export const CreditsMemberPrice = ({ copy, id }: { copy: CreditsMemberPriceCopy;
 
   console.log('copy in CreditsMemberPrice', copy)
 
-  // 定义需要获取的 metafield，包括透明图
+  // 定义需要获取的 metafield，包括透明图和优惠券信息
   const variantMetafieldIdentifiers: any[] = [
     {
       namespace: 'global',
       key: 'transparentImg',
     },
+    {
+      namespace: '__discountCodeApp',
+      key: 'data',
+    },
   ]
 
   // 根据屏幕尺寸动态调整每页显示的商品数量
@@ -94,9 +98,44 @@ export const CreditsMemberPrice = ({ copy, id }: { copy: CreditsMemberPriceCopy;
     },
   })
 
-  // 计算会员价的辅助函数（仅使用普通会员 user_identity = 1 的折扣）
+  // 从 variant metafields 中获取有效的 coupon 折扣金额
+  const getCouponDiscount = useCallback((variant: any) => {
+    try {
+      const discountData = variant?.metafields?.__discountCodeApp?.data
+      if (!discountData) return 0
+
+      // discountData 已经是对象，不需要 JSON.parse
+      const discounts = discountData
+      if (!Array.isArray(discounts) || discounts.length === 0) return 0
+
+      // 获取第一个有效的 coupon（检查时间范围）
+      const now = new Date()
+      const validDiscount = discounts.find((discount: any) => {
+        const startsAt = discount.starts_at ? new Date(discount.starts_at) : null
+        const endsAt = discount.ends_at ? new Date(discount.ends_at) : null
+
+        // 检查 coupon 是否在有效期内
+        if (startsAt && startsAt > now) return false
+        if (endsAt && endsAt < now) return false
+
+        return true
+      })
+
+      // 返回折扣金额（fixed_amount 类型）
+      if (validDiscount?.value_type === 'fixed_amount' && validDiscount?.fixed_value) {
+        return parseFloat(validDiscount.fixed_value)
+      }
+
+      return 0
+    } catch (error) {
+      console.error('Failed to get coupon discount:', error)
+      return 0
+    }
+  }, [])
+
+  // 计算会员价的辅助函数（仅使用普通会员 user_identity = 1 的折扣，并叠加 coupon 折扣）
   const calculateMemberPrice = useCallback(
-    (price: number) => {
+    (price: number, variant?: any) => {
       if (!targetRule) return null
 
       const discountConfig = targetRule?.discount_conf
@@ -116,12 +155,25 @@ export const CreditsMemberPrice = ({ copy, id }: { copy: CreditsMemberPriceCopy;
           break
       }
 
+      // 叠加 coupon 折扣
+      if (variant) {
+        const couponDiscount = getCouponDiscount(variant)
+        if (couponDiscount > 0) {
+          salePrice = salePrice.sub(couponDiscount)
+        }
+      }
+
+      // 确保价格不为负数
+      if (salePrice.lessThan(0)) {
+        salePrice = new Decimal(0)
+      }
+
       return {
         memberPrice: salePrice.toNumber(),
         originalPrice: price,
       }
     },
-    [targetRule]
+    [targetRule, getCouponDiscount]
   )
 
   // 处理会员价产品列表（仅普通会员 user_identity = 1 的折扣）
@@ -137,7 +189,7 @@ export const CreditsMemberPrice = ({ copy, id }: { copy: CreditsMemberPriceCopy;
           const productVariant = product.variants?.find(v => v.sku === variant.sku) || product.variants?.[0]
           if (!productVariant || !productVariant.availableForSale) return null
 
-          const priceResult = calculateMemberPrice(productVariant.price.amount)
+          const priceResult = calculateMemberPrice(productVariant.price.amount, productVariant)
           if (!priceResult) return null
 
           return {