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

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}

package/src/templates/credits.tsx

@@ -12,21 +12,22 @@ import { CreditsWaysToGetCredits, CreditsWaysToGetCreditsCopy } from '../compone
 import { CreditsRedeemList, CreditsRedeemListCopy } from '../components/credits/creditsRedeemList'
 import { CreditsCash, CreditsCashCopy } from '../components/credits/creditsCash'
 import { CreditsFaq, CreditsFaqCopy } from '../components/credits/creditsFaq'
+import { AuthCodeActivateCopy } from 'src/components/registration/authCodeActivate/type'
 
 export enum ComponentKey {
-  Banner = 'banner',
-  InfoCard = 'infoCard',
-  Benefits = 'benefits',
-  WaysToGetCredits = 'waysToGetCredits',
-  RedeemList = 'redeemList',
-  SpendCreditsLikeCash = 'spendCreditsLikeCash',
-  Faqs = 'faqs',
+  Banner = 'creditsBanner',
+  InfoCard = 'creditsInfoCard',
+  Benefits = 'creditsBenefits',
+  WaysToGetCredits = 'creditsWaysToGetCredits',
+  RedeemList = 'creditsRedeemList',
+  SpendCreditsLikeCash = 'creditsCash',
+  Faqs = 'creditsFaq',
 }
 export type CreditsTemplateProps = {
   headlessConfig: HeadlessConfig
   siteConfig: {
     registrationsSettings: {
-      authCodeActivate: any
+      authCodeActivate: AuthCodeActivateCopy
     }
     taskIdToTypeMapping: Record<string, DTC_TASK_TYPE>
   }
@@ -87,32 +88,41 @@ export const CreditsTemplate = ({
           pageCommon={pageConfig.common}
         >
           <div className={classNames('bg-[#f5f5f7] leading-[1.2]')}>
-            {pageConfig.order.map(item => {
-              const componentCopy = pageConfig.components?.[item]
+            {pageConfig.order.map(key => {
+              const componentCopy = pageConfig.components?.[key]
               if (!componentCopy) return null
               return (
                 <>
-                  {(item: ComponentKey) => {
-                    switch (item) {
-                      case 'banner':
-                        return <CreditsBanner copy={componentCopy as CreditsBannerCopy} />
-                      case 'infoCard':
-                        return <CreditsInfoCard copy={componentCopy as CreditsInfoCardCopy} />
-                      case 'benefits':
-                        return <CreditsBenefits copy={componentCopy as CreditsBenefitsCopy} />
-                      case 'waysToGetCredits':
-                        return <CreditsWaysToGetCredits copy={componentCopy as CreditsWaysToGetCreditsCopy} />
-                      case 'redeemList':
-                        return <CreditsRedeemList copy={componentCopy as CreditsRedeemListCopy} />
-                      case 'spendCreditsLikeCash':
-                        return <CreditsCash copy={componentCopy as CreditsCashCopy} />
-                      case 'faqs':
-                        return <CreditsFaq copy={componentCopy as CreditsFaqCopy} />
-                      default:
-                        return null
-                    }
-                  }}
-                  <div className="laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16" />
+                  {key === ComponentKey.Banner && <CreditsBanner copy={componentCopy as CreditsBannerCopy} />}
+                  {key === ComponentKey.InfoCard && userContext?.profile && (
+                    <CreditsInfoCard copy={componentCopy as CreditsInfoCardCopy} />
+                  )}
+                  {key === ComponentKey.Benefits && <CreditsBenefits copy={componentCopy as CreditsBenefitsCopy} />}
+                  {key === ComponentKey.WaysToGetCredits && (
+                    <CreditsWaysToGetCredits
+                      copy={componentCopy as CreditsWaysToGetCreditsCopy}
+                      classNames={
+                        headlessConfig.brand === 'anker'
+                          ? {
+                              subtitle: 'text-white',
+                              equalCreditsText:
+                                'bg-gradient-to-r from-[#3AD1FF] to-[#008CD6] bg-clip-text text-transparent',
+                            }
+                          : {
+                              subtitle: 'text-[#D1D1D1]',
+                              equalCreditsText: 'text-[#F6EAD0]',
+                            }
+                      }
+                    />
+                  )}
+                  {key === ComponentKey.RedeemList && (
+                    <CreditsRedeemList copy={componentCopy as CreditsRedeemListCopy} />
+                  )}
+                  {key === ComponentKey.SpendCreditsLikeCash && <CreditsCash copy={componentCopy as CreditsCashCopy} />}
+                  {key === ComponentKey.Faqs && <CreditsFaq copy={componentCopy as CreditsFaqCopy} />}
+                  {key !== ComponentKey.Banner && (
+                    <div className="laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16" />
+                  )}
                 </>
               )
             })}

package/src/components/credits/const.ts

@@ -1 +0,0 @@
-export const roundedBrands = ['eufy', 'soundcore']