@anker-in/campaign-ui 0.2.0-beta.1 → 0.2.0-beta.11

package/src/components/credits/modal/activitiesModal.tsx

@@ -4,12 +4,11 @@ import { CreditType, DTC_TASK_TYPE, TaskSubType, TaskType } from '../context/con
 import useActivities from '../context/hooks/useActivities'
 import type { Task } from '../context/response'
 import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
-import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import { Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'
 import LoadingDots from './loadingDots'
 import { Picture, Text } from '@anker-in/headless-ui'
 import dayjs from 'dayjs'
-import { roundedBrands } from '../const'
 
 export interface MyActivitiesMetafields {
   title: string
@@ -46,7 +45,7 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
   const [page, setPage] = useState(1)
   const { taskIdToTypeMapping } = useCreditsContext()
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const myActivitiesOptions = useMemo(() => {
     return {

package/src/components/credits/modal/creditsUploadReceiptModal.tsx

@@ -2,8 +2,7 @@ import { Button, Heading, Text } from '@anker-in/headless-ui'
 import { useCallback, useState } from 'react'
 import { CreditsModalContainer } from './modalContainer'
 import { useUploadReceipt } from '../context/hooks/useUploadReceipt'
-import { useHeadlessContext } from '@anker-in/lib'
-import { roundedBrands } from '../const'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import classNames from 'classnames'
 
 export type ReceiptCopy = {
@@ -47,7 +46,7 @@ export function CreditsUploadReceiptModal({
   })
 
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const handleSubmit = useCallback(() => {
     trigger(

package/src/components/credits/modal/modalContainer.tsx

@@ -1,7 +1,6 @@
-import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import { useEffect, useState, type UIEvent } from 'react'
 import ReactModal from 'react-modal'
-import { roundedBrands } from '../const'
 
 export type ModalContainerProps = {
   overlayClassName?: string
@@ -43,7 +42,7 @@ export const CreditsModalContainer = ({
   }, [isOpen, useAnimation])
 
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   return (
     <ReactModal

package/src/components/credits/modal/subscribeModal.tsx

@@ -1,14 +1,13 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
-import { Button, Picture, Text } from '@anker-in/headless-ui'
-import { classNames, fetcher, gaTrack, useHeadlessContext } from '@anker-in/lib'
+import { Button, Checkbox, Picture, Text } from '@anker-in/headless-ui'
+import { classNames, fetcher, gaTrack, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import Cookies from 'js-cookie'
 import { parse } from 'query-string'
 import sha256 from 'crypto-js/sha256'
 import { useCreditsContext } from '../context/provider'
 import { emailValidate } from '../context/utils'
 import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
-import { roundedBrands } from '../const'
 
 export type CreditsSubscribeModalCopy = {
   title: string
@@ -44,7 +43,7 @@ const getAdCookie = () => {
 
 export function CreditsSubscribeModal({ copy, onSuccess, ...props }: CreditsSubscribeModalProps) {
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const { locale } = useRouter()
   const [policy, setPolicy] = useState(false)
   const [email, setEmail] = useState('')
@@ -93,10 +92,12 @@ export function CreditsSubscribeModal({ copy, onSuccess, ...props }: CreditsSubs
 
     if (!result.errors) {
       setSuccessMessage(copy.successTips || 'Subscribed successfully!')
-      onSuccess && onSuccess()
+      if (onSuccess) {
+        onSuccess()
+      }
       setTimeout(() => {
         setSuccessMessage('')
-      }, 2000)
+      }, 3000)
       gaTrack({
         subscribe_hashed_email: email ? sha256(email) : '',
       })
@@ -177,33 +178,9 @@ export function CreditsSubscribeModal({ copy, onSuccess, ...props }: CreditsSubs
           </Button>
         </div>
         <div className="flex w-full">
-          <div
-            className="group relative mr-6 cursor-pointer"
-            onClick={() => setPolicy(!policy)}
-            onKeyDown={e => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault()
-                setPolicy(!policy)
-              }
-            }}
-            role="button"
-            tabIndex={0}
-          >
-            <input
-              type="checkbox"
-              readOnly
-              checked={policy}
-              className="peer absolute left-0 top-0 h-4 w-4 cursor-pointer opacity-0"
-            />
-            <label
-              className={classNames(
-                'absolute left-[30px] top-0 h-5 cursor-pointer leading-5 before:absolute before:left-[-30px] before:top-0 before:h-4 before:w-4 before:rounded-[2px] before:border before:border-[#aaa] before:content-[""] after:absolute after:left-[-25px] after:top-[1px] after:h-[10px] after:w-[6px] after:rotate-45 after:border-0 after:content-[""] group-hover:before:border-[#17bbef] peer-checked:before:border-[#17bbef] peer-checked:before:bg-[#17bbef] peer-checked:after:border-b-2 peer-checked:after:border-r-2 peer-checked:after:border-white peer-checked:after:bg-[#17bbef]',
-                !rounded && 'rounded-none'
-              )}
-            />
-          </div>
+          <Checkbox checked={policy} onCheckedChange={() => setPolicy(!policy)} required className="border-[#1d1d1f]" />
           <label
-            className="text-left text-[14px] font-semibold text-[#777] [&_a]:underline"
+            className="text-left ml-2 text-[14px] font-semibold text-[#777] [&_a]:underline"
             dangerouslySetInnerHTML={{
               __html: copy?.policy || '',
             }}

package/src/components/credits/modal/tip.tsx

@@ -1,13 +1,12 @@
-import { useHeadlessContext } from '@anker-in/lib'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import classNames from 'classnames'
 import { useState } from 'react'
-import { roundedBrands } from '../const'
 
 function Tip({ info, index }: { info: string; index: number }) {
   const [show, setShow] = useState(false)
 
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   return (
     <div

package/src/components/credits/type.ts

@@ -52,6 +52,7 @@ export interface ShippingZone {
 
 export type CreditsPageCommon = {
   pointUnit?: string
+  infoIcon?: string
   ruleLabel?: string
   soldOut?: string
   copied?: string
@@ -63,8 +64,9 @@ export type CreditsPageCommon = {
       url: string
     }
   }
-  activities?: MyActivitiesMetafields
-  rewards?: MyRewardsMetafields
+  activitiesModal?: MyActivitiesMetafields
+  rewardsModal?: MyRewardsMetafields
+  insufficientCredits?: string
   validatorInfo?: {
     addressInfo: {
       name: string

package/src/components/registration/authCodeActivate/Message.tsx

@@ -1,7 +1,7 @@
 export const Message = ({ status, message }: { status: string; message: string }) => {
   return (
     status && (
-      <div className="absolute left-5 right-5 top-10 flex items-center gap-2 rounded-sm bg-white px-4 py-3 shadow-lg min-md:left-12 min-md:right-12">
+      <div className="absolute left-5 right-5 top-2 flex items-center gap-2 rounded-sm bg-white px-4 py-3 shadow-lg min-md:left-12 min-md:right-12">
         <div className="flex-shrink-0">
           {status === 'success' && (
             <span className="inline-block h-5 w-5">

package/src/components/registration/authCodeActivate/index.tsx

@@ -6,17 +6,20 @@ import {
   useHeadlessContext,
   useEmailValidation,
   useCountDown,
+  ROUNDED_BRANDS,
 } from '@anker-in/lib'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Message } from './Message'
 import { AuthCodeActivateProps } from './type'
 import { useRegistration } from '../context'
+import { RegistrationModalContainer } from '../modalContainer'
 
-export const AuthCodeActivate: React.FC<AuthCodeActivateProps> = ({ copy, autoSendEmail = false }) => {
-  const { locale } = useHeadlessContext()
+export const AuthCodeActivate: React.FC<AuthCodeActivateProps> = ({ copy }) => {
+  const { locale, brand } = useHeadlessContext()
   const { email, authCodeActivate } = useRegistration()
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
-  const { activeToken, setActiveToken, setIsSendingActivateEmail, setIsActivateSuccess, onAuthSuccess } =
+  const { activeToken, setActiveToken, setIsSendingActivateEmail, setIsActivateSuccess, onAuthSuccess, autoSendEmail } =
     authCodeActivate
 
   const { isMutating: emailValidationLoading, trigger: triggerEmailValidation } = useEmailValidation()
@@ -28,8 +31,8 @@ export const AuthCodeActivate: React.FC<AuthCodeActivateProps> = ({ copy, autoSe
   } = useSendEmailValidation()
 
   const [messageText, setMessageText] = useState('')
-  const [resendStatus, setResendStatus] = useState('')
-  const { startCountDown, startAction, countDown } = useCountDown(60)
+  const [messageStatus, setMessageStatus] = useState('')
+  const { startCountDown: isStartCountDown, startAction: startCountDown, countDown } = useCountDown(60)
 
   const [error, setError] = useState('')
   const [focusIndex, setFocusIndex] = useState(0)
@@ -45,10 +48,10 @@ export const AuthCodeActivate: React.FC<AuthCodeActivateProps> = ({ copy, autoSe
   }, [focusIndex])
 
   useEffect(() => {
-    if (sendEmailData.active_token) {
-      setActiveToken(sendEmailData.active_token)
+    if (sendEmailData?.data?.data?.active_token) {
+      setActiveToken(sendEmailData.data.data.active_token)
     }
-  }, [sendEmailData])
+  }, [sendEmailData?.data?.data?.active_token])
 
   useEffect(() => {
     setIsSendingActivateEmail(isSendingEmail)
@@ -57,12 +60,25 @@ export const AuthCodeActivate: React.FC<AuthCodeActivateProps> = ({ copy, autoSe
   // 自动发送邮箱验证码
   useEffect(() => {
     if (autoSendEmail && email) {
-      triggerSendValidationEmail({
-        email: email,
-        data: {
-          redirect_url: `${window?.location?.origin}${window?.location?.pathname}`,
+      triggerSendValidationEmail(
+        {
+          email: email,
+          data: {
+            redirect_url: `${window?.location?.origin}${window?.location?.pathname}`,
+          },
         },
-      })
+        {
+          onSuccess: () => {
+            setMessageStatus('success')
+            setMessageText(copy?.sendEmailSuccessMessage || '')
+            startCountDown()
+            setTimeout(() => {
+              setMessageStatus('')
+              setMessageText('')
+            }, 5000)
+          },
+        }
+      )
     }
   }, [autoSendEmail, email, triggerSendValidationEmail])
 
@@ -78,8 +94,13 @@ export const AuthCodeActivate: React.FC<AuthCodeActivateProps> = ({ copy, autoSe
       },
       {
         onSuccess: () => {
-          setResendStatus('success')
-          startAction()
+          setMessageStatus('success')
+          setMessageText(copy?.sendEmailSuccessMessage || '')
+          startCountDown()
+          setTimeout(() => {
+            setMessageStatus('')
+            setMessageText('')
+          }, 5000)
         },
       }
     )
@@ -150,10 +171,16 @@ export const AuthCodeActivate: React.FC<AuthCodeActivateProps> = ({ copy, autoSe
         },
         {
           onSuccess: () => {
-            setResendStatus('success')
+            setMessageStatus('success')
             setMessageText(copy?.authSuccessMessage || '')
             setIsActivateSuccess(true)
-            onAuthSuccess?.()
+            if (onAuthSuccess) {
+              onAuthSuccess()
+            } else {
+              setTimeout(() => {
+                authCodeActivate.close()
+              }, 3000)
+            }
           },
           onError: (err: any) => {
             if (err?.errorCode === '104') {
@@ -171,7 +198,7 @@ export const AuthCodeActivate: React.FC<AuthCodeActivateProps> = ({ copy, autoSe
 
     // 设置定时器清除状态信息
     let timer = setTimeout(() => {
-      setResendStatus('')
+      setMessageStatus('')
       setMessageText('')
       clearTimeout(timer)
     }, 5000)
@@ -197,102 +224,107 @@ export const AuthCodeActivate: React.FC<AuthCodeActivateProps> = ({ copy, autoSe
   ])
 
   return (
-    <div className={cn('p-12 px-5 !pb-12 min-l:px-12')}>
-      <div>
-        <Text
-          className="text-[22px] font-extrabold leading-[120%] text-[#333] min-l:text-[24px] [&_abbr]:text-[#005d8e]"
-          html={copy?.authCodeTitle}
-        />
-        <Text
-          as="p"
-          className="mt-3 text-[14px] font-semibold leading-[140%] text-[rgba(51,51,51,0.75)] min-l:text-base [&_abbr]:text-[#333]"
-          html={copy?.authCodeDesc?.replace('%email%', email || '')}
-        />
-      </div>
-      <div className="mt-6">
-        <Text
-          className="mt-4 text-[14px] !font-bold font-semibold leading-[140%] text-[#333] min-l:mt-6"
-          html={copy?.enterActiveCodeText}
-        />
-        <div className="my-3 flex justify-between">
-          {codeArray.map((item, index) => (
-            <div key={index} className="col-span-1 aspect-1 text-[#555]">
-              <input
-                ref={inputRef => {
-                  if (inputRef) {
-                    inputRefs.current[index] = inputRef
-                  }
-                }}
-                key={index}
-                type="tel"
-                className="flex size-full items-center justify-center rounded-[12px] border border-[#333333]/20 bg-[#EEEEEE] text-center text-[24px] font-medium focus:border-[#333]/50 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&:focus-visible]:outline-none"
-                value={item}
-                autoComplete="false"
-                autoCorrect="false"
-                spellCheck="false"
-                autoCapitalize="false"
-                onChange={event => handleInputCodeChange(event, index)}
-                onFocus={() => {
-                  setFocusIndex(index)
-                }}
-                onPaste={event => {
-                  const paste = event.clipboardData.getData('text')
-                  if (!Number.isNaN(Number(paste))) {
-                    const pastedCode = paste.split('').slice(0, 6)
-                    setCodeArray(pastedCode.concat(Array(6 - pastedCode.length).fill('')))
-                    if (pastedCode.length <= codeArray.length) {
-                      setFocusIndex(pastedCode.length - 1)
-                    }
-                  }
-                }}
-                onKeyDown={event => {
-                  const { value } = event.target as HTMLInputElement
-                  if (event.key === 'Backspace' && !value && index > 0) {
-                    setFocusIndex(index - 1)
-                  }
-                }}
-              />
-            </div>
-          ))}
-        </div>
-
-        {error && <Text className="mb-3 text-[14px] font-semibold leading-[120%] text-[#f84d4f]" html={error} />}
-        {copy?.authCodeContent && (
-          <ul
-            className='flex flex-col gap-1 [&_li]:flex [&_li]:gap-2 [&_li]:text-[14px] [&_li]:font-semibold [&_li]:leading-[120%] [&_li]:text-[rgba(51,51,51,0.55)] [&_li]:before:content-["•"]'
-            dangerouslySetInnerHTML={{ __html: copy?.authCodeContent }}
+    <RegistrationModalContainer isOpen={authCodeActivate.isOpen} onClose={authCodeActivate.close}>
+      <div className="relative">
+        <div>
+          <Text
+            className="text-[22px] font-extrabold leading-[120%] text-[#333] min-l:text-[24px] [&_abbr]:text-[#005d8e]"
+            html={copy?.authCodeTitle}
           />
-        )}
-      </div>
-      <div className="mt-4 min-l:mt-6">
-        <Text className="text-base font-semibold leading-[100%] text-[#333]" html={copy?.authCodeReceiveText} />{' '}
-        {startCountDown ? (
           <Text
-            html={copy?.retrieveText?.replace('%countdownTime%', countDown.toString())}
-            className="cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline"
+            as="p"
+            className="mt-3 text-[14px] font-semibold leading-[140%] text-[rgba(51,51,51,0.75)] min-l:text-base [&_abbr]:text-[#333]"
+            html={copy?.authCodeDesc?.replace('%email%', email || '')}
           />
-        ) : (
+        </div>
+        <div className="mt-6">
           <Text
-            onClick={handleSendAgain}
-            className={cn(
-              'cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline',
-              {
-                'pointer-events-none': startCountDown || isSendingEmail,
-              }
-            )}
-            html={copy?.sendAgainText}
+            className="mt-4 text-[14px] !font-bold font-semibold leading-[140%] text-[#333] min-l:mt-6"
+            html={copy?.enterActiveCodeText}
           />
-        )}
-        <Button
-          type="submit"
-          loading={emailValidationLoading}
-          className="mt-6 flex h-[54px] w-full cursor-pointer items-center justify-center rounded-[40px] px-8 py-[15px] text-center text-base font-bold leading-[100%] text-white min-l:mt-8"
-          onClick={handleAuthCodeSubmit}
-        >
-          {copy.buttonText}
-        </Button>
+          <div className="my-3 grid grid-cols-6 gap-2">
+            {codeArray.map((item, index) => (
+              <div key={index} className="col-span-1 aspect-1 text-[#555]">
+                <input
+                  ref={inputRef => {
+                    if (inputRef) {
+                      inputRefs.current[index] = inputRef
+                    }
+                  }}
+                  key={index}
+                  type="tel"
+                  className={cn(
+                    'flex size-full items-center justify-center border border-[#333333]/20 bg-[#EEEEEE] text-center text-[24px] font-medium focus:border-[#333]/50 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&:focus-visible]:outline-none',
+                    rounded && 'rounded-[12px]'
+                  )}
+                  value={item}
+                  autoComplete="false"
+                  autoCorrect="false"
+                  spellCheck="false"
+                  autoCapitalize="false"
+                  onChange={event => handleInputCodeChange(event, index)}
+                  onFocus={() => {
+                    setFocusIndex(index)
+                  }}
+                  onPaste={event => {
+                    const paste = event.clipboardData.getData('text')
+                    if (!Number.isNaN(Number(paste))) {
+                      const pastedCode = paste.split('').slice(0, 6)
+                      setCodeArray(pastedCode.concat(Array(6 - pastedCode.length).fill('')))
+                      if (pastedCode.length <= codeArray.length) {
+                        setFocusIndex(pastedCode.length - 1)
+                      }
+                    }
+                  }}
+                  onKeyDown={event => {
+                    const { value } = event.target as HTMLInputElement
+                    if (event.key === 'Backspace' && !value && index > 0) {
+                      setFocusIndex(index - 1)
+                    }
+                  }}
+                />
+              </div>
+            ))}
+          </div>
+
+          {error && <Text className="mb-3 text-[14px] font-semibold leading-[120%] text-[#f84d4f]" html={error} />}
+          {copy?.authCodeContent && (
+            <ul
+              className='flex flex-col gap-1 [&_li]:flex [&_li]:gap-2 [&_li]:text-[14px] [&_li]:font-semibold [&_li]:leading-[120%] [&_li]:text-[rgba(51,51,51,0.55)] [&_li]:before:content-["•"]'
+              dangerouslySetInnerHTML={{ __html: copy?.authCodeContent }}
+            />
+          )}
+        </div>
+        <div className="mt-4 min-l:mt-6">
+          <Text className="text-base font-semibold leading-[100%] text-[#333]" html={copy?.authCodeReceiveText} />{' '}
+          {isStartCountDown ? (
+            <Text
+              html={copy?.retrieveText?.replace('%countdownTime%', countDown.toString())}
+              className="cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline"
+            />
+          ) : (
+            <Text
+              onClick={handleSendAgain}
+              className={cn(
+                'cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline',
+                {
+                  'pointer-events-none': isStartCountDown || isSendingEmail,
+                }
+              )}
+              html={copy?.sendAgainText}
+            />
+          )}
+          <Button
+            type="submit"
+            loading={emailValidationLoading}
+            className="mt-6 flex h-[54px] w-full cursor-pointer items-center justify-center px-8 py-[15px] text-center text-base font-bold leading-[100%] text-white min-l:mt-8"
+            onClick={handleAuthCodeSubmit}
+          >
+            {copy.buttonText}
+          </Button>
+        </div>
+        <Message status={messageStatus} message={messageText} />
       </div>
-      <Message status={resendStatus} message={messageText} />
-    </div>
+    </RegistrationModalContainer>
   )
 }

package/src/components/registration/authCodeActivate/type.ts

@@ -20,5 +20,4 @@ export type AuthCodeActivateCopy = {
 
 export type AuthCodeActivateProps = {
   copy: AuthCodeActivateCopy
-  autoSendEmail?: boolean
 }

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

@@ -1,4 +1,5 @@
 import { createContext, Dispatch, PropsWithChildren, SetStateAction, useContext, useState } from 'react'
+import { AuthCodeActivate } from '../authCodeActivate'
 
 interface RegistrationContextType {
   email?: string
@@ -15,6 +16,8 @@ interface RegistrationContextType {
     setActiveToken: Dispatch<SetStateAction<string | undefined>>
     setIsActivateSuccess: Dispatch<SetStateAction<boolean>>
     setOnAuthSuccess: Dispatch<SetStateAction<(() => void) | undefined>>
+    autoSendEmail: boolean
+    setAutoSendEmail: Dispatch<SetStateAction<boolean>>
   }
 }
 
@@ -33,6 +36,8 @@ export const RegistrationContext = createContext<RegistrationContextType>({
     setIsActivateSuccess: () => {},
     setOnAuthSuccess: () => {},
     onAuthSuccess: undefined,
+    autoSendEmail: false,
+    setAutoSendEmail: () => {},
   },
 })
 
@@ -50,6 +55,7 @@ export const RegistrationProvider = ({ children, email, copy }: PropsWithChildre
   const [isActivateSuccess, setIsActivateSuccess] = useState(false)
   const [activeToken, setActiveToken] = useState<string>()
   const [isSendingActivateEmail, setIsSendingActivateEmail] = useState(false)
+  const [autoSendEmail, setAutoSendEmail] = useState(false)
 
   return (
     <RegistrationContext.Provider
@@ -68,10 +74,13 @@ export const RegistrationProvider = ({ children, email, copy }: PropsWithChildre
           isSendingActivateEmail,
           setIsSendingActivateEmail,
           setActiveToken,
+          autoSendEmail,
+          setAutoSendEmail,
         },
       }}
     >
       {children}
+      {copy?.authCodeActivate && <AuthCodeActivate copy={copy.authCodeActivate} />}
     </RegistrationContext.Provider>
   )
 }

package/src/components/registration/modalContainer.tsx

@@ -1,4 +1,4 @@
-import { classNames as cn } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import { useEffect, useState, type UIEvent } from 'react'
 import ReactModal from 'react-modal'
 
@@ -9,14 +9,13 @@ export type ModalContainerProps = {
   title?: string
   titleClassName?: string
   useAnimation?: boolean // 使用动画展示
-  animationClassName?: string // 动画展示控制的classname
   isOpen: boolean
   children?: any
   onClose: () => void
   onScrollEnd?: (event: UIEvent<HTMLDivElement>) => void
 }
 
-export const CreditsModalContainer = ({
+export const RegistrationModalContainer = ({
   isOpen,
   title,
   className = '',
@@ -25,11 +24,12 @@ export const CreditsModalContainer = ({
   onClose,
   onScrollEnd,
   children,
-  useAnimation,
-  animationClassName,
+  useAnimation = true,
   titleClassName = '',
   ...props
 }: ModalContainerProps): React.ReactElement => {
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const [animationShow, setAnimationShow] = useState(false)
 
   useEffect(() => {
@@ -49,8 +49,10 @@ export const CreditsModalContainer = ({
         overlayClassName
       )}
       className={cn(
-        'min-md:max-h-[calc(100vh-96px)] relative flex min-h-[200px] flex-col overflow-hidden rounded-[16px] bg-white outline-none transition-all duration-300 md:h-[88.27vh] md:w-full md:rounded-b-none',
-        animationShow ? '' : animationClassName,
+        'min-md:max-h-[calc(100vh-96px)] w-[540px] relative flex min-h-[200px] flex-col overflow-hidden bg-white outline-none transition-all duration-300 md:h-auto md:w-full',
+        rounded && 'rounded-[16px] md:rounded-b-none',
+        useAnimation && 'md:translate-y-[100vh]',
+        animationShow && 'md:translate-y-0',
         className
       )}
       onRequestClose={onClose}