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

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/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

@@ -22,7 +22,7 @@ export type CreditsBannerCopy = {
   }
 }
 
-export function CreditsBanner({ copy }: { copy: CreditsBannerCopy }) {
+export function CreditsBanner({ copy, id }: { copy: CreditsBannerCopy; id?: string }) {
   const { profile, openSignInPopup, openSignUpPopup } = useCreditsContext()
   const isLogin = profile ? Object.keys(profile).length !== 0 : false
 
@@ -36,7 +36,7 @@ export function CreditsBanner({ copy }: { copy: CreditsBannerCopy }) {
 
   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`}

package/src/components/credits/creditsBenefits/{benefitItem.tsx → BenefitItem.tsx}

@@ -1,6 +1,6 @@
 import { Heading, Picture, Text } from '@anker-in/headless-ui'
 import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
-import IconInfo from './iconInfo'
+import IconInfo from './IconInfo'
 
 export interface BenefitItemCopy {
   icon: {
@@ -16,30 +16,49 @@ const BenefitItem = ({
   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={{
-        background: 'linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)',
-      }}
+      style={cardStyle}
     >
       <div className="flex flex-col">
-        <Picture
-          className="mb-[16px] size-[31px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0"
-          alt={item.icon?.alt}
-          source={item.icon?.url}
-        />
+        <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 && (

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

@@ -7,16 +7,19 @@ 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, classNames as cn } from '@anker-in/lib'
 
 export type CreditsBenefitsCopy = {
   title: string
   benefits: BenefitItemCopy[]
+  bigIcon?: boolean
+  cardBgColor?: string
+  cardBorderColor?: string
 }
 
-export const CreditsBenefits = ({ copy }: { copy: CreditsBenefitsCopy }) => {
+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 }) => {
@@ -42,7 +45,7 @@ export const CreditsBenefits = ({ copy }: { copy: CreditsBenefitsCopy }) => {
   }
 
   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-4 xl:grid-cols-3 gap-[16px] l:hidden items-stretch">
         {copy.benefits.map((item, index) => (
@@ -52,6 +55,9 @@ export const CreditsBenefits = ({ copy }: { copy: CreditsBenefitsCopy }) => {
             handleClick={handleClick}
             isNoteActive={activeNoteIndex === index}
             index={index}
+            bigIcon={copy.bigIcon}
+            cardBgColor={copy.cardBgColor}
+            cardBorderColor={copy.cardBorderColor}
           />
         ))}
       </div>
@@ -88,6 +94,9 @@ export const CreditsBenefits = ({ copy }: { copy: CreditsBenefitsCopy }) => {
                 handleClick={handleClick}
                 isNoteActive={activeNoteIndex === index}
                 index={index}
+                bigIcon={copy.bigIcon}
+                cardBgColor={copy.cardBgColor}
+                cardBorderColor={copy.cardBorderColor}
               />
             </SwiperSlide>
           ))}

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

@@ -1,4 +1,4 @@
-import { Container, Heading } from '@anker-in/headless-ui'
+import { Container, Heading, Text } from '@anker-in/headless-ui'
 import { useMemo, useState } from 'react'
 
 import RedeemableItem from './RedeemableItem'
@@ -8,8 +8,9 @@ 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 }: { copy: CreditsCashCopy }) => {
+export const CreditsCash = ({ copy, id }: { copy: CreditsCashCopy; id?: string }) => {
   const [rules, setRules] = useState<string | string[]>()
   const { redeemableList } = useRedeemableList()
   const { pageCommon } = useCreditsContext()
@@ -50,8 +51,9 @@ export const CreditsCash = ({ copy }: { copy: CreditsCashCopy }) => {
   }, [productByHandles, copy.list, redeemableList])
 
   return (
-    <Container className={cn('bg-[#F5F5F5]')}>
+    <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

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

@@ -113,11 +113,14 @@ function RedeemableItem({
     <div
       className={cn(
         'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]',
-        !rounded && 'rounded-none',
+        !rounded && 'rounded-none md:rounded-none',
         className
       )}
     >
-      <div className={cn('relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]')}>
+      <a
+        href={`/products/${itemData.product.handle}`}
+        className={cn('relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]')}
+      >
         <Picture
           className="mx-auto h-full w-auto"
           imgClassName="h-full object-contain"
@@ -127,13 +130,13 @@ function RedeemableItem({
             itemData?.productVariant?.image?.url
           }
         ></Picture>
-      </div>
+      </a>
       <div className={cn('mt-[22px] w-full l:mt-[8px]')}>
         <Text
           html={itemData?.product?.title}
           title={itemData.config?.title || itemData.alpcData?.title || itemData.product?.title}
           size={2}
-          className="line-clamp-2 h-[58px] text-[24px] leading-[1.2] l:h-[40px] l:text-[16px] l-xxl:h-[48px] l-xxl:text-[20px]"
+          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]"
         />
         {itemData?.config?.rules?.split('<br>')?.length > 0 && (
           <button
@@ -163,16 +166,8 @@ function RedeemableItem({
             {pageCommon?.ruleLabel}
           </button>
         )}
-        <Text
-          html={formatPrice({
-            amount: itemData?.productVariant?.price.amount,
-            currencyCode: itemData?.productVariant?.price.currencyCode || 'USD',
-            locale: locale,
-          })}
-          className="mt-[24px] text-[24px] font-bold text-[#D1D1D1] line-through l:text-[14px]"
-          as="p"
-        />
-        <div className="flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]">
+
+        <div className="flex flex-wrap items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]">
           <Picture
             className="size-[24px] l-xxl:size-[22px] md-l:size-[18px] md:size-[16px]"
             source="https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783"
@@ -185,7 +180,16 @@ function RedeemableItem({
             })}`}
             size={2}
             as="p"
-            className="ml-[4px] mt-[4px] text-[28px] font-bold leading-none md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] "
+            className="ml-[4px] mt-[4px] font-bold leading-none text-[24px] l-xxl:text-[20px] l:text-[16px]"
+          />
+          <Text
+            html={formatPrice({
+              amount: itemData?.productVariant?.price.amount,
+              currencyCode: itemData?.productVariant?.price.currencyCode || 'USD',
+              locale: locale,
+            })}
+            className="l-xxl:text-[20px] mt-[4px] l:text-[16px] ml-[4px] font-bold leading-[1.2] tracking-[-0.8px] text-[#4A4C56] line-through"
+            as="p"
           />
         </div>
 

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

@@ -17,7 +17,7 @@ export type CreditsFaqCopy = {
     answer: string
   }[]
 }
-export const CreditsFaq = ({ copy }: { copy: CreditsFaqCopy }) => {
+export const CreditsFaq = ({ copy, id }: { copy: CreditsFaqCopy; id?: string }) => {
   const { title, items: faqList, subTitle = '' } = copy || {}
   const { brand } = useHeadlessContext()
   const rounded = ROUNDED_BRANDS.includes(brand)
@@ -35,7 +35,7 @@ export const CreditsFaq = ({ copy }: { copy: CreditsFaqCopy }) => {
   }, [faqList, categoryList.length, activeTab])
 
   return (
-    <Container className="bg-[#F5F5F7]" id="faq">
+    <Container id={id} className="bg-[#F5F5F7]">
       {title && <Heading as="h2" size="4" html={copy?.title} />}
       {subTitle && (
         <div className="mt-[8px] flex flex-row">

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

@@ -18,7 +18,7 @@ export type CreditsInfoCardCopy = {
   buttons: ButtonConfig[]
 }
 
-export function CreditsInfoCard({ copy }: { copy: CreditsInfoCardCopy }) {
+export function CreditsInfoCard({ copy, id }: { copy: CreditsInfoCardCopy; id?: string }) {
   const [openActivities, setOpenActivities] = useState(false)
   const [openRewards, setOpenRewards] = useState(false)
   const [hover, setHover] = useState<boolean>(false)
@@ -42,7 +42,7 @@ export function CreditsInfoCard({ copy }: { copy: CreditsInfoCardCopy }) {
   }, [])
 
   return (
-    <Container asChild id="infoCard" className="-mb-[86px] -translate-y-[86px] x:-mb-[30px] x:-translate-y-[30px]">
+    <Container asChild id={id} className="-mb-[86px] -translate-y-[86px] x:-mb-[30px] x:-translate-y-[30px]">
       <div
         className={cn(
           'mx-auto flex justify-between items-center rounded-[12px] border border-white px-[24px] py-[40px]',