@anker-in/campaign-ui 0.2.0 → 0.2.1

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

@@ -2,33 +2,29 @@ import { Button, Container, Text } from '@anker-in/headless-ui'
 
 import { useCallback, useState } from 'react'
 import { useCreditsContext } from '../context/provider'
-import { cn } from '../../../helpers'
 import { numberFormat } from '../context/utils'
 import ActivitiesModal from '../modal/activitiesModal'
-import MyRewardsModal, { type MyRewardsMetafields } from '../modal/MyRewardsModal'
-import { type MyActivitiesMetafields } from '../modal/activitiesModal'
-import { gaNormalClick } from '../../../helpers/track'
+import MyRewardsModal from '../modal/MyRewardsModal'
+import { gaNormalClick, classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 
 type ButtonConfig = {
   text: string
   type: 'activities' | 'rewards'
 }
-export interface InfoCardProps {
-  data: {
-    balanceLabel: string
-    comingSoonLabel: string
-    comingSoonTips: string
-    buttons: ButtonConfig[]
-    pointUnit: string
-    infoIcon: string
-    myActivities: MyActivitiesMetafields
-    myRewards: MyRewardsMetafields
-  }
+export type CreditsInfoCardCopy = {
+  balanceLabel: string
+  comingSoonLabel: string
+  comingSoonTips: string
+  buttons: ButtonConfig[]
 }
-export function CreditsInfoCard({ data }: InfoCardProps) {
+
+export function CreditsInfoCard({ copy }: { copy: CreditsInfoCardCopy }) {
   const [openActivities, setOpenActivities] = useState(false)
   const [openRewards, setOpenRewards] = useState(false)
   const [hover, setHover] = useState<boolean>(false)
+  const { creditInfo, pageCommon } = useCreditsContext()
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const handleButtonClick = useCallback((buttonConfig: ButtonConfig) => {
     gaNormalClick({ position: 'info_card', label: buttonConfig.text })
@@ -45,8 +41,6 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
     }
   }, [])
 
-  const { creditInfo } = useCreditsContext()
-
   return (
     <Container asChild id="infoCard" className="-mb-[86px] -translate-y-[86px] x:-mb-[30px] x:-translate-y-[30px]">
       <div
@@ -54,7 +48,8 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
           'mx-auto flex justify-between items-center rounded-[12px] border border-white px-[24px] py-[40px]',
           'l:flex-col l:items-start',
           'min-l:px-[48px]',
-          'min-xl:px-[100px]'
+          'min-xl:px-[100px]',
+          !rounded && 'rounded-none'
         )}
         style={{
           background:
@@ -73,23 +68,23 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
                 'mb-[24px] text-[14px] font-bold l:mb-[6px] xl:text-[16px] min-md:text-[18px] l-xl:mb-[16px]'
               )}
             >
-              {data.balanceLabel}
+              {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]')}>
                 {creditInfo ? numberFormat(creditInfo.available_credit) : 0}
               </div>
-              <div className="text-[16px]">{data?.pointUnit}</div>
+              <div className="text-[16px]">{pageCommon?.pointUnit}</div>
             </div>
           </div>
           <div className="w-fit md:flex-1">
             <div className={cn('mb-[24px] flex text-[18px] l:mb-[6px] l:text-[14px] l-xl:mb-[16px]')}>
-              <Text className="text-[14px] font-bold xl:text-[16px] min-md:text-[18px]" html={data.comingSoonLabel} />
-              {data.comingSoonTips && (
+              <Text className="text-[14px] font-bold xl:text-[16px] min-md:text-[18px]" html={copy.comingSoonLabel} />
+              {copy.comingSoonTips && (
                 <div className="group relative ml-[4px] flex cursor-pointer items-start">
                   <Text
                     as="div"
-                    html={data?.infoIcon}
+                    html={pageCommon?.infoIcon}
                     className="size-[18px] cursor-pointer [&_svg]:size-full"
                     onClick={() => {
                       if (hover) {
@@ -108,9 +103,19 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
                       hover ? 'block' : 'hidden'
                     )}
                   >
-                    <div className="relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow">
-                      <Text size="2" html={data.comingSoonTips} className="desktop:text-[18px]" />
-                      <div className="absolute -top-[10px] left-[40px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]" />
+                    <div
+                      className={cn(
+                        'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow',
+                        !rounded && 'rounded-none'
+                      )}
+                    >
+                      <Text size="2" html={copy.comingSoonTips} className="desktop:text-[18px]" />
+                      <div
+                        className={cn(
+                          'absolute -top-[10px] left-[40px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]',
+                          !rounded && 'rounded-none'
+                        )}
+                      />
                     </div>
                   </div>
                 </div>
@@ -120,7 +125,7 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
               <div className={cn('mr-[8px] text-[36px] font-extrabold', 'min-l:text-[44px]', 'min-xl:text-[56px]')}>
                 {creditInfo ? numberFormat(creditInfo.pending_credit) : 0}
               </div>
-              <div className="text-[16px]">{data?.pointUnit}</div>
+              <div className="text-[16px]">{pageCommon?.pointUnit}</div>
             </div>
           </div>
         </div>
@@ -129,7 +134,7 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
             'grid w-fit md:w-full l:mt-[32px] l:gap-[12px] min-l:gap-[16px] min-l:pl-[48px] md-l:grid-cols-2'
           )}
         >
-          {data.buttons?.map((item, index) => (
+          {copy.buttons?.map((item, index) => (
             <Button
               key={index}
               variant={index === 0 ? 'secondary' : 'primary'}
@@ -144,19 +149,19 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
           ))}
         </div>
 
-        {data?.myActivities && (
+        {pageCommon?.activitiesModal && (
           <ActivitiesModal
             isOpen={openActivities}
-            data={data?.myActivities}
+            data={pageCommon?.activitiesModal}
             onClose={() => {
               setOpenActivities(false)
             }}
           />
         )}
-        {data?.myRewards && (
+        {pageCommon?.rewardsModal && (
           <MyRewardsModal
             isOpen={openRewards}
-            data={data?.myRewards}
+            data={pageCommon?.rewardsModal}
             onClose={() => {
               setOpenRewards(false)
             }}

package/src/components/credits/creditsRedeemList/AddressForm/CountrySelect.tsx

@@ -2,6 +2,7 @@ import { Picture } from '@anker-in/headless-ui'
 import useClickOutside from '../../context/hooks/useClickOutside'
 import classNames from 'classnames'
 import { useEffect, useState } from 'react'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 
 interface Country {
   id: string
@@ -20,7 +21,8 @@ interface CountrySelectProps {
 export function CountrySelect({ countries, loading, className, value, onChange }: CountrySelectProps) {
   const [show, setShow] = useState(false)
   const [display, setDisplay] = useState<any>('')
-
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const dorpdown = useClickOutside<HTMLDivElement>(() => {
     setShow(false)
   })
@@ -53,6 +55,7 @@ export function CountrySelect({ countries, loading, className, value, onChange }
       <div
         className={classNames(
           'absolute left-0 top-0 hidden !h-[50px] rounded-[2px] pr-[45px] text-[16px] font-bold focus:!border-[#6D6D6F] min-l:!block',
+          !rounded && 'rounded-none',
           className
         )}
         onClick={() => {
@@ -71,14 +74,15 @@ export function CountrySelect({ countries, loading, className, value, onChange }
 
       <Picture
         source="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/country-select.png?v=1692202500"
-        imgClassName="pointer-events-none absolute right-0 top-0 bottom-0 !w-[45px] object-cover"
+        className="absolute pointer-events-none right-0 top-0 bottom-0 size-[50px] object-cover"
         alt="arrow"
       />
 
       <div
         ref={dorpdown}
         className={classNames(
-          'absolute left-0 top-[58px] z-30 max-h-[334px] w-full cursor-pointer overflow-auto rounded-[4px] bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]',
+          'absolute left-0 top-[58px] z-30 max-h-[334px] w-full cursor-pointer overflow-auto  bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]',
+          !rounded && 'rounded-none',
           { '!hidden': !show }
         )}
       >

package/src/components/credits/creditsRedeemList/AddressForm/StateSelect.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames'
 import { Picture } from '@anker-in/headless-ui'
 import { useEffect, useMemo, useState } from 'react'
 import useClickOutside from '../../context/hooks/useClickOutside'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 
 interface StateSelectProps {
   states: { code: string; id: string; name: string }[]
@@ -16,6 +17,8 @@ interface StateSelectProps {
 export function StateSelect({ states, stateName = '', stateCode = '', className = '', onChange }: StateSelectProps) {
   const [show, setShow] = useState(false)
   const [display, setDisplay] = useState<any>('')
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const dropdown = useClickOutside<HTMLDivElement>(() => {
     setShow(false)
@@ -78,7 +81,8 @@ export function StateSelect({ states, stateName = '', stateCode = '', className
           <div
             ref={dropdown}
             className={classNames(
-              'absolute left-0 top-[58px] z-30 max-h-[334px] w-full cursor-pointer overflow-auto rounded-[4px] bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]',
+              'absolute left-0 top-[58px] z-30 max-h-[334px] w-full cursor-pointer overflow-auto  bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]',
+              !rounded && 'rounded-none',
               { '!hidden': !show }
             )}
           >

package/src/components/credits/creditsRedeemList/AddressForm/index.tsx

@@ -7,13 +7,13 @@ import { Input } from './Input'
 import { StateSelect } from './StateSelect'
 import { ALPC_COUNTRY_MAP } from '../../context/const'
 import { useCreditsContext } from '../../context/provider'
-import { useHeadlessContext } from '@anker-in/lib'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import { AddressFormProps } from './type'
 
 export const AddressForm = ({ countries, countriesLoading, form, validate, errors, onChange }: AddressFormProps) => {
   const { profile, customer } = useCreditsContext()
-  const { locale } = useHeadlessContext()
-
+  const { locale, brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const [address, setAddress] = useState<Record<string, any>>()
 
   const states = useMemo(() => {
@@ -79,7 +79,8 @@ export const AddressForm = ({ countries, countriesLoading, form, validate, error
               const error = errors.find(item => item.key === input.key)?.message
               const inputClassName = classNames(
                 'h-full w-full appearance-none rounded-[2px] border bg-white px-[14px] py-[17px] leading-[1] outline-none placeholder:text-[#999] autofill:shadow-white focus:border-brand disabled:pointer-events-none disabled:text-[#999] disabled:bg-[#F7F8F9] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
-                error ? '!border-[#F84D4F]' : 'border-[#d8d8d8]'
+                error ? '!border-[#F84D4F]' : 'border-[#d8d8d8]',
+                !rounded && 'rounded-none'
               )
 
               if (input.type === 'state') {

package/src/components/credits/creditsRedeemList/{index.tsx → CreditsRedeemList.tsx}

@@ -7,36 +7,24 @@ import RedeemProductModal from './RedeemProductModal'
 import { useCreditsContext } from '../context/provider'
 import useRedeemableList from '../context/hooks/useRedeemableList'
 import { AlpcConsumeType, AlpcErrorCode } from '../context/const'
-import { useProductsByHandles } from '@anker-in/lib'
+import { useHeadlessContext, useProductsByHandles, gaTrack, ROUNDED_BRANDS } from '@anker-in/lib'
 import type { RedeemableItem as RedeemableItemType } from '../type'
 import { RedeemableItem } from './RedeemableItem'
 import RulesModal from '../modal/rulesModal'
 import { CreditsRedeemListCopy } from './type'
-import { gaTrack } from '../../../helpers/track'
+import { useRegistration } from '../../../components/registration'
 
-export function CreditsRedeemList({
-  copy,
-  className = '',
-  tabClassName = '',
-  hideTitle = false,
-  cardClassName,
-  activate,
-}: {
-  copy: CreditsRedeemListCopy
-  className?: string
-  tabClassName?: string
-  hideTitle?: boolean
-  cardClassName?: string
-  activate: {
-    openAuthCodePopup: () => void
-    isSuccess: boolean
-  }
-}) {
+export const CreditsRedeemList = ({ copy }: { copy: CreditsRedeemListCopy }) => {
   const {
     profile,
     openSignUpPopup,
     gtm: { pageGroup },
+    pageCommon,
   } = useCreditsContext()
+  const { authCodeActivate } = useRegistration()
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
   const isLogin = Object.keys(profile || {}).length > 0
 
   const [activeTab, setActiveTab] = useState<string>(copy.list[0].label)
@@ -95,13 +83,13 @@ export function CreditsRedeemList({
   )
 
   return (
-    <Container className={classNames('relative bg-[#F5F5F7]', className)}>
-      {!hideTitle && <Heading as="h2" size="4" html={copy.title} />}
+    <Container className={classNames('relative bg-[#F5F5F7]')}>
+      <Heading as="h2" size="4" html={copy.title} />
 
       <Tabs
-        shape="rounded"
+        shape={rounded ? 'rounded' : 'square'}
         align="left"
-        className={classNames('sticky top-0 z-20 py-[24px] md:justify-center', tabClassName)}
+        className={classNames('sticky top-0 z-20 py-[24px] md:justify-center')}
         value={activeTab.toString()}
         onValueChange={value => {
           setActiveTab(value)
@@ -136,14 +124,13 @@ export function CreditsRedeemList({
               onRedeem={(item: RedeemableItemType) => {
                 if (!isLogin) {
                   openSignUpPopup()
-                } else if (!profile?.activated && !activate.isSuccess) {
-                  activate.openAuthCodePopup()
+                } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {
+                  authCodeActivate.open()
                 } else {
                   setPopRedeemData(item)
                 }
               }}
               onRulesOpen={setRules}
-              className={cardClassName}
             />
           ))}
         </div>
@@ -180,7 +167,7 @@ export function CreditsRedeemList({
           titleClassName="border-b-transparent h-[56px]"
           rules={rules}
           scrollClassName="md:mt-[8px] md:mb-[24px] md:pt-0"
-          title={copy?.ruleLabel}
+          title={pageCommon?.ruleLabel}
           ruleClassName="text-[#1d1d1f] font-bold"
         />
       )}

package/src/components/credits/creditsRedeemList/NonProductValue.tsx

@@ -1,9 +1,10 @@
 import { Text } from '@anker-in/headless-ui'
 import { RedeemableItem } from '../type'
 import { ConsumeType } from '../context/const'
-import { CreditsRedeemListCopy } from './type'
+import { useCreditsContext } from '../context/provider'
 
-export const NoneProductValue = ({ item, copy }: { item: RedeemableItem; copy: CreditsRedeemListCopy }) => {
+export const NoneProductValue = ({ item }: { item: RedeemableItem }) => {
+  const { pageCommon } = useCreditsContext()
   // shipping coupon 仅展示文案
   if (item.config?.type === ConsumeType.ShippingCoupon) {
     return (
@@ -26,7 +27,7 @@ export const NoneProductValue = ({ item, copy }: { item: RedeemableItem; copy: C
             />
             <Text
               className="ml-[4px] text-[24px] font-bold leading-[2] md:ml-[2px] l:text-[12px] xxl:leading-[1.4] l-xxl:text-[20px]"
-              html={item.config?.type === ConsumeType.GiftCard ? copy?.giftCardLabel : copy?.off}
+              html={item.config?.type === ConsumeType.GiftCard ? pageCommon?.giftCardLabel : pageCommon?.off}
             />
           </div>
         ) : (

package/src/components/credits/creditsRedeemList/RedeemCouponModal.tsx

@@ -30,7 +30,7 @@ function RedeemCouponModal({
   const [disabled, setDisabled] = useState(false)
   const { copy: copyText, copied: copiedStatus } = useCopy()
 
-  const { profile, fetchCreditInfo } = useCreditsContext()
+  const { profile, fetchCreditInfo, pageCommon } = useCreditsContext()
 
   const { isMutating: loading, trigger } = useRedeemCoupon({
     onSuccess(responseData) {
@@ -96,8 +96,8 @@ function RedeemCouponModal({
         )}
       >
         <div className="relative mx-auto h-[164px] w-[324px]">
-          {copy?.imageMapping[item.config?.type]?.url && (
-            <Picture source={copy.imageMapping[item.config.type].url} className="h-full [&_img]:h-full" />
+          {pageCommon?.imageMapping?.[item.config?.type]?.url && (
+            <Picture source={pageCommon.imageMapping[item.config.type].url} className="h-full [&_img]:h-full" />
           )}
           <div className="absolute bottom-[8px] left-[16px] font-extrabold text-white">
             {item.config.value ? (
@@ -126,7 +126,7 @@ function RedeemCouponModal({
                 }
               }}
             >
-              {copiedStatus ? copy?.copied : copy?.copy}
+              {copiedStatus ? pageCommon?.copied : pageCommon?.copy}
             </div>
           </div>
         ) : (
@@ -136,12 +136,12 @@ function RedeemCouponModal({
               'mt-[30px] text-center text-[24px] font-bold leading-[1.2] md:mt-[18px] md:text-[20px] md:leading-[1.2]'
             )}
           >
-            {numberFormat(item.alpc?.consumeCredits)} {copy?.pointUnit}
+            {numberFormat(item.alpc?.consumeCredits)} {pageCommon?.pointUnit}
           </Text>
         )}
         {!couponCode && item.config?.rules?.length > 0 && (
           <div className="mt-[18px] w-full text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px] md:text-[14px]">
-            <div className="mb-[4px]">{copy?.ruleLabel}:</div>
+            <div className="mb-[4px]">{pageCommon?.ruleLabel}:</div>
             <ul className="ml-4 grid grid-flow-row gap-[4px]">
               {item.config?.rules?.map((text, index) => (
                 <li className="list-disc" key={index}>

package/src/components/credits/creditsRedeemList/RedeemProductModal/Address.tsx

@@ -1,7 +1,7 @@
 import { Button, Text } from '@anker-in/headless-ui'
 import classNames from 'classnames'
 import { AddressForm } from '../AddressForm'
-import { useHeadlessContext } from '@anker-in/lib'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import type { RedeemableItem as RedeemableItemType } from '../../type'
 import { CreditsRedeemListCopy } from '../type'
 import { ProductInfo } from './ProductInfo'
@@ -34,7 +34,8 @@ export const Address = ({
   handlePayment,
   item,
 }: AddressProps) => {
-  const { storeDomain } = useHeadlessContext()
+  const { storeDomain, brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const { countries = [], isLoading: countriesLoading } = useCountries({ shopifyStoreDomain: storeDomain })
 
   return (
@@ -42,18 +43,20 @@ export const Address = ({
       <div className={classNames('max-h-[500px] overflow-y-auto px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]')}>
         <div>
           {shippingAddress && <Text className="mb-5 text-[16px] font-bold" html={shippingAddress}></Text>}
-          <AddressForm
-            onChange={setAddress}
-            validate={validateAddress}
-            errors={validateErrors}
-            form={copy.redeemModal.product.addressForm}
-            countries={countries}
-            countriesLoading={countriesLoading}
-          ></AddressForm>
+          {copy.redeemModal?.product?.addressForm && (
+            <AddressForm
+              onChange={setAddress}
+              validate={validateAddress}
+              errors={validateErrors}
+              form={copy.redeemModal.product.addressForm}
+              countries={countries}
+              countriesLoading={countriesLoading}
+            ></AddressForm>
+          )}
         </div>
       </div>
       <div className="sticky bottom-0 flex flex-col items-center justify-center bg-white px-[48px] py-[24px] l:px-[16px]">
-        <div className="flex w-full items-center rounded-[16px] bg-[#F5F5F7] p-[16px]">
+        <div className={classNames('flex w-full items-center bg-[#F5F5F7] p-[16px]', !rounded && 'rounded-none')}>
           {shippingProduct && <Text className="mb-5 text-[16px] font-bold" html={shippingProduct}></Text>}
           <ProductInfo item={item} copy={copy} />
         </div>

package/src/components/credits/creditsRedeemList/RedeemProductModal/Init.tsx

@@ -6,6 +6,7 @@ import type { RedeemableItem as RedeemableItemType } from '../../type'
 import { CreditsRedeemListCopy } from '../type'
 import { ConsumeType } from '../../context/const'
 import { NoneProductValue } from './NonProductValue'
+import { useCreditsContext } from '../../context/provider'
 
 type InitProps = {
   copy: CreditsRedeemListCopy
@@ -16,6 +17,7 @@ type InitProps = {
 }
 
 export const Init = ({ copy, item, loading, disabled, setStatus }: InitProps) => {
+  const { pageCommon } = useCreditsContext()
   const rules = useMemo(() => {
     if (item.config.rules?.length) {
       return item.config.rules
@@ -37,7 +39,7 @@ export const Init = ({ copy, item, loading, disabled, setStatus }: InitProps) =>
               source={
                 item.config?.type === ConsumeType.Product
                   ? item.product.images[0]?.url
-                  : copy?.imageMapping[item.config.type]?.url || item.config.image?.url
+                  : pageCommon?.imageMapping?.[item.config.type]?.url || item.config.image?.url
               }
               className="h-full w-auto [&_img]:h-full [&_img]:w-auto [&_img]:object-contain"
             ></Picture>
@@ -60,7 +62,7 @@ export const Init = ({ copy, item, loading, disabled, setStatus }: InitProps) =>
               as="p"
               className={classNames(' text-center text-[24px] font-bold leading-[1.2] md:text-[20px] md:leading-[1.2]')}
             >
-              {numberFormat(item.alpc?.consumeCredits)} {copy?.pointUnit}
+              {numberFormat(item.alpc?.consumeCredits)} {pageCommon?.pointUnit}
             </Text>
           </div>
           <div className="mt-[16px] w-full text-[14px] font-semibold text-[#777] md:mt-[12px]">

package/src/components/credits/creditsRedeemList/RedeemProductModal/NonProductValue.tsx

@@ -2,8 +2,10 @@ import { Text } from '@anker-in/headless-ui'
 import { RedeemableItem } from '../../type'
 import { CreditsRedeemListCopy } from '../type'
 import { ConsumeType } from '../../context/const'
+import { useCreditsContext } from '../../context/provider'
 
 export const NoneProductValue = ({ item, copy }: { item: RedeemableItem; copy: CreditsRedeemListCopy }) => {
+  const { pageCommon } = useCreditsContext()
   // shipping coupon 仅展示文案
   if (item.config?.type === ConsumeType.ShippingCoupon) {
     return <Text className="text-[24px] w-[70%] font-bold leading-none" html={item.config?.value} as="p" />
@@ -13,7 +15,7 @@ export const NoneProductValue = ({ item, copy }: { item: RedeemableItem; copy: C
         <Text className="text-[64px] font-extrabold leading-none" html={item.config.value.toString()} />
         <Text
           className="text-[24px] font-bold leading-[2]"
-          html={item.config.type === ConsumeType.Coupon ? copy?.off : copy?.giftCardLabel}
+          html={item.config.type === ConsumeType.Coupon ? pageCommon?.off : pageCommon?.giftCardLabel}
         />
       </div>
     ) : (

package/src/components/credits/creditsRedeemList/RedeemProductModal/ProductInfo.tsx

@@ -1,8 +1,9 @@
-import { Picture } from '@anker-in/headless-ui'
+import { Picture, Text } from '@anker-in/headless-ui'
 import { formatPrice } from '../../context/utils'
 import type { RedeemableItem as RedeemableItemType } from '../../type'
 import { CreditsRedeemListCopy } from '../type'
 import { useHeadlessContext } from '@anker-in/lib'
+import { useCreditsContext } from '../../context/provider'
 
 type ProductInfoProps = {
   item: RedeemableItemType
@@ -11,6 +12,7 @@ type ProductInfoProps = {
 
 export const ProductInfo = ({ item, copy }: ProductInfoProps) => {
   const { locale } = useHeadlessContext()
+  const { pageCommon } = useCreditsContext()
 
   return (
     <div className="flex w-full items-center justify-center md:items-start md:justify-start">
@@ -32,9 +34,11 @@ export const ProductInfo = ({ item, copy }: ProductInfoProps) => {
         </div>
 
         <div className="mt-[16px] md:mt-[12px]">
-          <div className="mb-[12px] line-clamp-1 text-[16px] font-bold l:!hidden" title={item.product.title}>
-            {item.product.title}
-          </div>
+          <Text
+            className="mb-[12px] line-clamp-1 text-[16px] font-bold l:!hidden"
+            html={item.product.title}
+            title={item.product.title}
+          ></Text>
           <div className="flex font-semibold leading-[1.4] md:flex-col">
             <div className="mr-[40px] text-[15px] font-bold text-[#777] md:mr-0 md:text-[12px]">
               <div className="mb-[8px] flex items-center md:mb-[4px]">
@@ -60,7 +64,7 @@ export const ProductInfo = ({ item, copy }: ProductInfoProps) => {
               <div className="l:flex l:items-center l:justify-between">
                 <span>{copy.redeemModal.product.totalPriceLabel}: </span>
                 <span className="ml-1">
-                  {item.alpc?.consumeCredits} {copy?.pointUnit}
+                  {item.alpc?.consumeCredits} {pageCommon?.pointUnit}
                 </span>
               </div>
             </div>

package/src/components/credits/creditsRedeemList/RedeemProductModal/Success.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames'
 import type { RedeemableItem as RedeemableItemType } from '../../type'
 import { CreditsRedeemListCopy } from '../type'
 import { ProductInfo } from './ProductInfo'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 
 type SuccessProps = {
   copy: CreditsRedeemListCopy
@@ -15,6 +16,8 @@ type SuccessProps = {
 }
 
 export const Success = ({ copy, shippingProduct, loading, address, disabled, onClose, item }: SuccessProps) => {
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
   return (
     <div className={classNames('max-h-[500px] overflow-y-auto px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]')}>
       <div className="flex flex-col items-center">
@@ -26,7 +29,7 @@ export const Success = ({ copy, shippingProduct, loading, address, disabled, onC
 
         {shippingProduct && <Text className="mb-5 text-[16px] font-bold" html={shippingProduct}></Text>}
 
-        <div className="flex w-full items-center rounded-[16px] bg-[#F5F5F7] p-[16px]">
+        <div className={classNames('flex w-full items-center bg-[#F5F5F7] p-[16px]', !rounded && 'rounded-none')}>
           <ProductInfo item={item} copy={copy} />
         </div>
 

package/src/components/credits/creditsRedeemList/RedeemProductModal/index.tsx

@@ -25,7 +25,7 @@ function RedeemProductModal({ item, copy, onError, ...props }: RedeemProductModa
   const { fetchCreditInfo, profile } = useCreditsContext()
   const { storeDomain, locale } = useHeadlessContext()
 
-  const { validatorInfo } = copy
+  const { pageCommon } = useCreditsContext()
   const { shippingAddress, shippingProduct } = copy.redeemModal.product
 
   const [status, setStatus] = useState<'init' | 'address' | 'success' | 'error'>('init')
@@ -99,7 +99,7 @@ function RedeemProductModal({ item, copy, onError, ...props }: RedeemProductModa
 
   const { validate: validateAddress, errors: validateErrors } = useAddressValidate({
     address: address,
-    validatorInfo: validatorInfo,
+    validatorInfo: pageCommon?.validatorInfo,
     formData: copy?.redeemModal.product.form?.flat() || [],
     errorLabel: {
       require: copy.redeemModal.product.required,