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

package/src/components/credits/context/utils/atobID.ts

@@ -0,0 +1,8 @@
+// 从 Shopify GraphQL ID 中提取数字 ID
+export function atobID(id: string) {
+  if (id && typeof id === 'string' && id.includes('/')) {
+    return id.split('/').pop()?.split('?')?.shift()
+  } else {
+    return id
+  }
+}

package/src/components/credits/context/utils/functionDiscountCalculate.ts

@@ -0,0 +1,57 @@
+import { FunctionDiscountType, RoundSelected } from '../memberPriceConst'
+import { DiscountConfig } from '../memberPriceTypes'
+import Decimal from 'decimal.js'
+
+// Function 计算折后价
+export const functionDiscountCalculate = ({
+  config,
+  price,
+}: {
+  config: DiscountConfig
+  price: number
+}) => {
+  const { apply_price_ending, one_decimal_place, two_decimal_place, round_selected } =
+    config.price_ending_conf || {}
+
+  let salePrice = new Decimal(price)
+
+  switch (config.discount_type) {
+    // 百分比折扣
+    case FunctionDiscountType.Percentage:
+      salePrice = salePrice.mul(100 - config.discount_value).div(100)
+      break
+    // 固定金额折扣
+    case FunctionDiscountType.FixedAmount:
+      salePrice = salePrice.sub(config.discount_value)
+      break
+    // 固定价格折扣
+    case FunctionDiscountType.FixedPrice:
+      salePrice = new Decimal(config.discount_value)
+      break
+    default:
+      break
+  }
+
+  if (apply_price_ending) {
+    // 小数位取舍
+    switch (round_selected) {
+      case RoundSelected.RoundHighest:
+        salePrice = salePrice.ceil()
+        break
+      case RoundSelected.RoundLowest:
+        salePrice = salePrice.floor()
+        break
+      case RoundSelected.RoundNearest:
+        salePrice = salePrice.round()
+        break
+      default:
+        salePrice = new Decimal(salePrice.toFixed(2, Decimal.ROUND_DOWN))
+        break
+    }
+
+    const priceEnding = salePrice.toString().split('.')
+    salePrice = new Decimal(priceEnding[0] + '.' + one_decimal_place + two_decimal_place)
+  }
+
+  return salePrice.toNumber()
+}

package/src/components/credits/context/utils/getFunctionMemberPrice.ts

@@ -0,0 +1,135 @@
+import { formatPrice } from '../utils'
+import { FunctionMemberPriceConfig, FunctionMemberPriceResult } from '../memberPriceTypes'
+import { ProductVariant } from '@anker-in/lib'
+import { functionDiscountCalculate } from './functionDiscountCalculate'
+import Decimal from 'decimal.js'
+import { getFunctionMemberPriceDiscountConfig } from './getFunctionMemberPriceDiscountConfig'
+import variantGetCoupon from './variantGetCoupon'
+
+// 计算单件商品的会员价
+export const getFunctionMemberPrice = ({
+  memberPriceDiscount,
+  currencyCode,
+  variant,
+  locale,
+}: {
+  memberPriceDiscount?: FunctionMemberPriceConfig[]
+  currencyCode?: string
+  variant?: ProductVariant
+  locale: string
+}) => {
+  const couponData = variantGetCoupon({ variant })
+
+  // variant对应的会员价折扣配置
+  const { memberPriceDiscountConfig, activeMemberPriceConfig } = getFunctionMemberPriceDiscountConfig({
+    config: memberPriceDiscount,
+    variant,
+  })
+
+  const useCoupon = !!activeMemberPriceConfig?.discount_combinations.other_product_discounts
+
+  if (!memberPriceDiscountConfig) {
+    return false as false
+  }
+
+  const originalPrice = {
+    amount: variant?.price.amount || 0,
+    priceWithCurrency: formatPrice({
+      amount: variant?.price.amount || 0,
+      currencyCode: currencyCode || 'USD',
+      locale,
+    }),
+  }
+
+  const salePriceWithoutCouponAmount = memberPriceDiscountConfig
+    ? functionDiscountCalculate({
+        config: memberPriceDiscountConfig,
+        price: variant?.price.amount || 0,
+      })
+    : variant?.price.amount || 0
+  const salePriceWithoutCoupon = {
+    amount: salePriceWithoutCouponAmount,
+    priceWithCurrency: formatPrice({
+      amount: salePriceWithoutCouponAmount,
+      currencyCode: currencyCode || 'USD',
+      locale,
+    }),
+  }
+
+  // function 会员价是在原价的基础上进行计算，暂不支持折后价
+  let salePriceAmount = salePriceWithoutCouponAmount
+
+  // 减去code的优惠
+  if (couponData?.variant_price4wscode && variant && useCoupon) {
+    if (useCoupon) {
+      // code的优惠金额
+      const codeSaveAmountDecimal = new Decimal(variant.price.amount).minus(couponData.variant_price4wscode)
+      salePriceAmount = new Decimal(salePriceWithoutCouponAmount).minus(codeSaveAmountDecimal).toNumber()
+    } else {
+      // 不能与 code 同时使用，需要判断会员价是否小于 code 的优惠金额，如果小于则当做没有会员价
+      const codeSaveAmountDecimal = new Decimal(variant.price.amount).minus(couponData.variant_price4wscode)
+      if (salePriceWithoutCouponAmount > codeSaveAmountDecimal.toNumber()) {
+        return false as false
+      }
+    }
+  }
+
+  const salePrice = {
+    amount: salePriceAmount,
+    priceWithCurrency: formatPrice({
+      amount: salePriceAmount,
+      currencyCode: currencyCode || 'USD',
+      locale,
+    }),
+  }
+
+  const savePriceAmount = new Decimal(originalPrice.amount).minus(salePrice.amount).toNumber()
+  const savePrice = {
+    amount: savePriceAmount,
+    priceWithCurrency: formatPrice({
+      amount: savePriceAmount,
+      currencyCode: currencyCode || 'USD',
+      locale,
+      maximumFractionDigits: 2,
+    }),
+  }
+
+  const savePriceWithoutCouponAmount = new Decimal(originalPrice.amount)
+    .minus(salePriceWithoutCoupon.amount)
+    .toNumber()
+  const savePriceWithoutCoupon = {
+    amount: savePriceWithoutCouponAmount,
+    priceWithCurrency: formatPrice({
+      amount: savePriceWithoutCouponAmount,
+      currencyCode: currencyCode || 'USD',
+      locale,
+      maximumFractionDigits: 2,
+    }),
+  }
+
+  const result: FunctionMemberPriceResult = {
+    // 是否存在会员价
+    hasMemberPrice: !!memberPriceDiscountConfig,
+    useCoupon,
+    // 原价
+    originalPrice: originalPrice.amount,
+    originalPriceWithCurrency: originalPrice.priceWithCurrency as string,
+    // 使用券后的折后价
+    salePrice: salePrice.amount,
+    salePriceWithCurrency: salePrice.priceWithCurrency as string,
+
+    // 不使用券的折后价
+    salePriceWithoutCoupon: salePriceWithoutCoupon.amount,
+    salePriceWithoutCouponWithCurrency: salePriceWithoutCoupon.priceWithCurrency as string,
+
+    // 包含使用券的节省金额
+    savePrice: savePrice.amount,
+    savePriceWithCurrency: savePrice.priceWithCurrency as string,
+
+    // 不使用券的节省金额
+    savePriceWithoutCoupon: savePriceWithoutCoupon.amount,
+    savePriceWithoutCouponWithCurrency: savePriceWithoutCoupon.priceWithCurrency as string,
+  }
+
+  return result
+}

package/src/components/credits/context/utils/getFunctionMemberPriceDiscountConfig.ts

@@ -0,0 +1,51 @@
+import { DiscountConfig, FunctionMemberPriceConfig } from '../memberPriceTypes'
+import { ProductVariant } from '@anker-in/lib'
+import { atobID } from './atobID'
+
+// 获取会员价折扣配置
+export const getFunctionMemberPriceDiscountConfig = ({
+  config,
+  variant,
+}: {
+  config?: FunctionMemberPriceConfig[]
+  variant?: ProductVariant
+}) => {
+  let memberPriceDiscountConfig: DiscountConfig | undefined
+  let activeMemberPriceConfig: FunctionMemberPriceConfig | undefined
+
+  if (!config || !variant) {
+    return {
+      memberPriceDiscountConfig,
+      activeMemberPriceConfig,
+    }
+  }
+
+  for (const configItem of config) {
+    memberPriceDiscountConfig = configItem.result_detail.member_discounts?.find(discountItem => {
+      if (discountItem.main_products.all_store_variant) {
+        return discountItem
+      }
+
+      return discountItem.main_products.variants.find(
+        variantConfig => String(variantConfig.variant_id) === atobID(variant.id as string)
+      )
+    })?.discount_conf
+
+    if (memberPriceDiscountConfig) {
+      activeMemberPriceConfig = configItem
+      break
+    }
+  }
+
+  if (!memberPriceDiscountConfig) {
+    return {
+      memberPriceDiscountConfig,
+      activeMemberPriceConfig,
+    }
+  }
+
+  return {
+    memberPriceDiscountConfig,
+    activeMemberPriceConfig,
+  }
+}

package/src/components/credits/context/utils/variantGetCoupon.ts

@@ -0,0 +1,34 @@
+import { ProductVariant } from '@anker-in/lib'
+import { atobID } from './atobID'
+
+const variantGetCoupon = ({
+  variant,
+  channel = '',
+}: {
+  variant?: ProductVariant
+  channel?: string
+}) => {
+  if (!variant) return undefined
+
+  const hideChannel = 'wsch'
+  const discountCodeApp = variant?.metafields?.discountCodeApp || []
+
+  const results = discountCodeApp?.filter((coupon: any) => {
+    const variantId = atobID(variant.id as string)
+    const isActive =
+      (!coupon?.ends_at || new Date(coupon?.ends_at).getTime() > new Date().getTime()) &&
+      new Date(coupon?.starts_at).getTime() <= new Date().getTime() &&
+      coupon.variant_shopify_id === +(variantId || '')
+
+    return (
+      isActive &&
+      (channel
+        ? coupon?.title?.toLocaleLowerCase().includes(channel)
+        : !coupon?.title?.toLocaleLowerCase().includes(hideChannel))
+    )
+  })
+
+  return results?.[0]
+}
+
+export default variantGetCoupon

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

@@ -147,3 +147,12 @@ export function formatVariantPrice({
 
   return { price, basePrice, discount }
 }
+
+/**
+ * 提取 variant id，去掉 gid://shopify/ProductVariant/ 前缀
+ */
+export function extractVariantId(id: string | number | undefined): string | null {
+  if (!id) return null
+  const idStr = typeof id === 'number' ? id.toString() : id
+  return idStr.replace('gid://shopify/ProductVariant/', '')
+}

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

@@ -0,0 +1,273 @@
+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 } 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 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="bg-[#F5F5F7]">
+      <Heading as="h2" size="4" html={copy.title} />
+      <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 xl-xxl:h-[448px] l-xl:h-[336px] h-[560px] l: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] l:mt-[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="h-full object-contain l:mx-auto md:h-auto md:w-full md-l:h-[302px]"
+              imgClassName="!h-full !object-contain"
+              source={copy.mainImage.url}
+            />
+          )}
+        </div>
+
+        {/* 卡片列表 */}
+        <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' })
+                }
+              }
+            }}
+          >
+            {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] xl:p-[16px]',
+                  rounded ? 'rounded-[16px]' : ''
+                )}
+              >
+                <div>
+                  <Text
+                    as="p"
+                    html={item.title}
+                    size={2}
+                    className="text-pretty text-[24px] font-bold xxl:text-[20px]"
+                  />
+                  <div className="mt-[8px] l:mt-[4px] flex items-center">
+                    <Picture
+                      className="size-[24px] xxl: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] text-[18px] xxl:text-[14px]"
+                    />
+                  </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"