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

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

@@ -0,0 +1,108 @@
+import { Heading, Picture, Text } from '@anker-in/headless-ui'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import IconInfo from './IconInfo'
+import { ROUNDED_BRANDS } from '../../../constants'
+
+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 md-l:line-clamp-3" />
+          {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 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>
+  )
+}

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

@@ -1,39 +1,45 @@
 import { Button, Text, Picture } from '@anker-in/headless-ui'
-import { useMemo } from 'react'
-import { cn } from '../../../helpers'
+import { useMemo, useState } from 'react'
 
 import { CreditsCashCopy, RedeemItem } from './type'
 import { useCreditsContext } from '../context/provider'
 import { useRedeemAndBuy } from '../context/hooks/useRedeemAndBuy'
-import { numberFormat } from '../context/utils'
-import { gaTrack } from '../../../helpers/track'
+import { formatPrice, numberFormat, extractVariantId } from '../context/utils'
+import { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { useRegistration } from '../../../components/registration'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 function RedeemableItem({
   copy,
   itemData,
   setRules,
   className,
-  authCodeActivate,
 }: {
   copy: CreditsCashCopy
   itemData: RedeemItem
   className?: string
   setRules: (rules: string[]) => void
   currencyCode: string
-  authCodeActivate: {
-    openAuthCodePopup: Function
-    isSuccess: boolean
-    setOnSuccess: (arg: Function) => void
-    isSendingActivateEmail: boolean
-  }
 }) {
   const {
     creditInfo,
     profile,
     openSignUpPopup,
+    pageCommon,
     gtm: { pageGroup },
   } = useCreditsContext()
-  const { trigger, isMutating } = useRedeemAndBuy()
+  const { authCodeActivate } = useRegistration()
+  const { brand, locale } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+  const [error, setError] = useState<string | null>(null)
+  const { trigger, isMutating } = useRedeemAndBuy(
+    {},
+    {
+      onError: error => {
+        setError(error.message)
+      },
+    }
+  )
 
   const isLogin = useMemo(() => {
     return !!profile
@@ -69,28 +75,16 @@ function RedeemableItem({
   ])
 
   const handleRedeem = () => {
+    setError(null)
     if (!isLogin) {
       openSignUpPopup()
-    } else if (!profile?.activated && !(authCodeActivate.isSendingActivateEmail || authCodeActivate.isSuccess)) {
-      authCodeActivate.openAuthCodePopup()
-      authCodeActivate.setOnSuccess(async () => {
-        const { success, url, error } = await trigger({
-          productVariant: itemData?.productVariant,
-          redeemId: itemData?.config?.redeemId,
-        })
-        if (success) {
-          window.open(url, '_blank')
-        } else {
-          console.error(error)
-        }
-      })
+    } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {
+      authCodeActivate.open()
     } else {
-      try {
-        trigger({
-          productVariant: itemData?.productVariant,
-          redeemId: itemData?.config?.redeemId,
-        })
-      } catch (error) {}
+      trigger({
+        productVariant: itemData?.productVariant,
+        redeemId: itemData?.config?.redeemId,
+      })
       gaTrack({
         event: 'ga4Event',
         event_name: 'lp_button',
@@ -119,11 +113,19 @@ function RedeemableItem({
   return (
     <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]',
+        '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',
         className
       )}
     >
-      <div className={cn('relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]')}>
+      <a
+        href={
+          extractVariantId(itemData.productVariant?.id)
+            ? `/products/${itemData.product.handle}?variant=${extractVariantId(itemData.productVariant?.id)}`
+            : `/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"
@@ -133,13 +135,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:line-clamp-3 l:h-[56px] 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
@@ -153,7 +155,7 @@ function RedeemableItem({
                 event_parameters: {
                   page_group: pageGroup,
                   position: copy.title,
-                  button_name: copy?.ruleLabel,
+                  button_name: pageCommon?.ruleLabel,
                   info: itemData?.alpcData?.id?.toString(),
                 },
               })
@@ -166,19 +168,33 @@ function RedeemableItem({
               }
             }}
           >
-            {copy?.ruleLabel}
+            {pageCommon?.ruleLabel}
           </button>
         )}
-        <div className="mt-[24px] 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-[20px]"
+            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"
           />
           <Text
-            html={`${numberFormat(itemData?.alpcData?.consumeCredits)} + ${itemData?.config?.price}`}
+            html={`${numberFormat(itemData?.alpcData?.consumeCredits)} + ${formatPrice({
+              amount: Number(itemData?.config?.price),
+              currencyCode: itemData?.productVariant?.price.currencyCode || 'USD',
+              locale: locale,
+            })}`}
             size={2}
             as="p"
-            className="ml-[4px] text-[28px] font-bold leading-[1.2] 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>
 
@@ -192,7 +208,7 @@ function RedeemableItem({
             onClick={() => {
               handleRedeem()
             }}
-            title={inSufficientCredit ? 'Insufficient credit' : redeemButtonText}
+            title={inSufficientCredit ? pageCommon.insufficientCredits : redeemButtonText}
           >
             {redeemButtonText}
           </Button>
@@ -202,13 +218,19 @@ function RedeemableItem({
               inSufficientCredit ? 'block' : 'hidden'
             )}
           >
-            <div className="relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]">
-              <Text as="p" size="2" html={copy?.insufficientCredits} className="text-[14px]" />
+            <div
+              className={cn(
+                'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]',
+                !rounded && 'rounded-none'
+              )}
+            >
+              <Text as="p" size="2" html={pageCommon?.insufficientCredits} className="text-[14px]" />
               <div className="absolute -top-[10px] left-[48px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]" />
             </div>
           </div>
         </div>
       </div>
+      {error && <div className="mt-[8px] text-[14px] text-[#FF0000]">{error}</div>}
     </div>
   )
 }

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

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

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

@@ -1,10 +1,10 @@
-import { ProductVariant, Product } from '@anker-in/shopify'
+import { ProductVariant, Product } from '@anker-in/lib'
 import { AlpcConsumeType } from '../context/const'
 
 type RedeemableItemConfig = {
   title: string
   desc: string
-  price: string
+  price: number
   credit: string
   rules: string
   image: {
@@ -22,11 +22,9 @@ export type CreditsCashCopy = {
     products: { handle: string; sku: string }[]
   })[]
   soldOut: string
-  ruleLabel: string
   unlockRewards: string
   btnRedeem: string
   off: string
-  insufficientCredits: string
 }
 
 export type RedeemItem = {

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

@@ -1,6 +1,6 @@
 import { Heading, Text } from '@anker-in/headless-ui'
 import { ChevronDownIcon } from '@heroicons/react/24/outline'
-import { cn } from '../../../../helpers/index'
+import { classNames as cn } from '@anker-in/lib'
 import { motion } from 'framer-motion'
 import { type ReactNode, useEffect, useState } from 'react'
 
@@ -34,13 +34,13 @@ export const FaqItem = ({
   return (
     <div key={index} className={cn('relative mx-0  border-b-[1px] border-[#e4e5e6] py-[24px] l:py-[16px]')}>
       <div
-        className='relative flex items-center'
+        className="relative flex items-center"
         onClick={() => {
           setExpanded(!expanded)
         }}
-        role='button'
+        role="button"
         tabIndex={0}
-        onKeyDown={(e) => {
+        onKeyDown={e => {
           if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault()
           }
@@ -48,12 +48,12 @@ export const FaqItem = ({
       >
         <Heading
           html={question}
-          as='h3'
+          as="h3"
           className={cn(
             showDots
               ? 'before:absolute before:left-[-15px] before:top-[8px] before:h-[6px] before:w-[6px] before:rounded-[50%] before:bg-[#000] before:content-[""]'
               : '',
-            'relative block flex-1 cursor-pointer pr-[10px] text-[18px] font-bold text-[#1D1D1F] l:text-[16px]',
+            'relative block flex-1 cursor-pointer pr-[10px] text-[18px] font-bold text-[#1D1D1F] l:text-[16px]'
           )}
         ></Heading>
         {itemRightIconRender ? (
@@ -62,7 +62,7 @@ export const FaqItem = ({
           <ChevronDownIcon
             className={cn(
               'size-[16px] shrink-0 cursor-pointer stroke-[2.5px] transition-all',
-              expanded ? 'rotate-180' : '',
+              expanded ? 'rotate-180' : ''
             )}
           />
         )}
@@ -70,22 +70,22 @@ export const FaqItem = ({
       <motion.div
         initial={false}
         animate={{ height: !expanded ? 0 : 'auto' }}
-        className='overflow-hidden [&_td]:border [&_td]:border-[#333] [&_td]:px-[8px] [&_td]:py-[4px]'
+        className="overflow-hidden [&_td]:border [&_td]:border-[#333] [&_td]:px-[8px] [&_td]:py-[4px]"
       >
         {answer?.toString()?.includes('https://www.youtube.com') ? (
           <Text
-            as='div'
+            as="div"
             className={cn('mt-[8px]')}
-            data-ratio='16:9'
+            data-ratio="16:9"
             data-content={answer}
             html={answer?.toString()}
           ></Text>
         ) : (
           <Text
-            as='div'
+            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',
+              'mt-[8px] text-[16px] font-bold leading-[1.5] text-[#3D3D3F] l:text-[14px] [&_a]:text-brand [&_a]:underline'
             )}
           ></Text>
         )}

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

@@ -1,10 +1,11 @@
 import { Container, Heading, Tabs, TabsList, TabsTrigger, Text } from '@anker-in/headless-ui'
-import { cn } from '../../../helpers/index'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { useMemo, useState } from 'react'
 
 import { FaqItem } from './faqItem/FaqItem'
+import { ROUNDED_BRANDS } from '../../../constants'
 
-export type FaqCopy = {
+export type CreditsFaqCopy = {
   title: string
   subTitle: string
   learnMore: {
@@ -17,8 +18,10 @@ export type FaqCopy = {
     answer: string
   }[]
 }
-export const CreditsFaq = ({ copy }: { copy: FaqCopy }) => {
+export const CreditsFaq = ({ copy, id }: { copy: CreditsFaqCopy; id?: string }) => {
   const { title, items: faqList, subTitle = '' } = copy || {}
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const categoryList = useMemo(() => {
     return Array.from(new Set(faqList?.map?.(faq => faq.category_name).filter(item => !!item)))
   }, [faqList])
@@ -33,7 +36,7 @@ export const CreditsFaq = ({ copy }: { copy: FaqCopy }) => {
   }, [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">
@@ -43,7 +46,7 @@ export const CreditsFaq = ({ copy }: { copy: FaqCopy }) => {
       {/* faq-nav */}
       <Tabs
         align="left"
-        shape="rounded"
+        shape={rounded ? 'rounded' : 'square'}
         className="mt-[24px]"
         value={activeTab.toString()}
         onValueChange={value => {
@@ -76,7 +79,7 @@ export const CreditsFaq = ({ copy }: { copy: FaqCopy }) => {
         <a
           href={copy.learnMore?.link}
           target="_blank"
-          className="mt-[64px] block w-full text-center text-[18px] font-bold text-brand hover:underline l:text-[16px]"
+          className="mt-[24px] block w-full text-center text-[18px] font-bold text-brand hover:underline l:text-[16px]"
         >
           {copy.learnMore?.label}
         </a>