@anker-in/campaign-ui 0.2.0 → 0.2.2

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

@@ -0,0 +1,338 @@
+import { Button, Text } from '@anker-in/headless-ui'
+import {
+  useSendEmailValidation,
+  gaTrack,
+  classNames as cn,
+  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 }) => {
+  const { locale, brand } = useHeadlessContext()
+  const { email, authCodeActivate } = useRegistration()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
+  const { activeToken, setActiveToken, setIsSendingActivateEmail, setIsActivateSuccess, onAuthSuccess, autoSendEmail } =
+    authCodeActivate
+
+  const { isMutating: emailValidationLoading, trigger: triggerEmailValidation } = useEmailValidation()
+
+  const {
+    isMutating: isSendingEmail,
+    trigger: triggerSendValidationEmail,
+    data: sendEmailData,
+  } = useSendEmailValidation()
+
+  const [messageText, setMessageText] = useState('')
+  const [messageStatus, setMessageStatus] = useState('')
+  const { startCountDown: isStartCountDown, startAction: startCountDown, countDown } = useCountDown(60)
+
+  const [error, setError] = useState('')
+  const [focusIndex, setFocusIndex] = useState(0)
+  const [codeArray, setCodeArray] = useState(new Array(6).fill(''))
+
+  const inputRefs = useRef<HTMLInputElement[]>([])
+  const code = codeArray.join('')
+
+  useEffect(() => {
+    if (inputRefs.current[focusIndex]) {
+      inputRefs.current[focusIndex].focus()
+    }
+  }, [focusIndex])
+
+  useEffect(() => {
+    if (sendEmailData?.data?.data?.active_token) {
+      setActiveToken(sendEmailData.data.data.active_token)
+    }
+  }, [sendEmailData?.data?.data?.active_token])
+
+  useEffect(() => {
+    setIsSendingActivateEmail(isSendingEmail)
+  }, [isSendingEmail, setIsSendingActivateEmail])
+
+  // 自动发送邮箱验证码
+  useEffect(() => {
+    if (autoSendEmail && email) {
+      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])
+
+  const handleSendAgain = useCallback(async () => {
+    if (!email) return
+    // 发起网络请求
+    await triggerSendValidationEmail(
+      {
+        email: email,
+        data: {
+          redirect_url: `${window?.location?.origin}${window?.location?.pathname}`,
+        },
+      },
+      {
+        onSuccess: () => {
+          setMessageStatus('success')
+          setMessageText(copy?.sendEmailSuccessMessage || '')
+          startCountDown()
+          setTimeout(() => {
+            setMessageStatus('')
+            setMessageText('')
+          }, 5000)
+        },
+      }
+    )
+    gaTrack({
+      event: 'ga4Event',
+      event_name: 'lp_button',
+      event_parameters: {
+        page_group: 'reg_sub_pop',
+        position: 'auth_code',
+        button_name: 'sent_again',
+      },
+    })
+  }, [email, triggerSendValidationEmail])
+
+  const handleInputCodeChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
+    const { value } = event.target
+
+    setError('')
+
+    if (Number.isNaN(Number(value))) {
+      return
+    }
+
+    if (value.length > 1) {
+      if (index < codeArray.length - 1) {
+        if (!codeArray[index + 1]) {
+          setFocusIndex(index + 1)
+          setCodeArray(old => {
+            const newCode = [...old]
+            newCode[index] = value[0]
+            if (value.length > 1) {
+              newCode[index + 1] = value[1]
+            }
+            return newCode
+          })
+        }
+      }
+      return
+    }
+    const newCode = [...codeArray]
+    newCode[index] = value
+    setCodeArray(newCode)
+    if (value) {
+      if (index < codeArray.length - 1 && !codeArray[index + 1]) {
+        setFocusIndex(index + 1)
+      }
+    } else if (index > 0) {
+      setFocusIndex(index - 1)
+    }
+  }
+
+  const handleAuthCodeSubmit = useCallback(async () => {
+    if (!code?.length) {
+      setError(copy?.codeEmptyError || '')
+      return
+    }
+
+    if (code.length < 6) {
+      setError(copy?.incorrectCodeError || '')
+      return
+    }
+
+    if (activeToken) {
+      await triggerEmailValidation(
+        {
+          token: activeToken,
+          code: code,
+        },
+        {
+          onSuccess: data => {
+            if (data.status >= 200 && data.status < 300) {
+              setMessageStatus('success')
+              setMessageText(copy?.authSuccessMessage || '')
+              setIsActivateSuccess(true)
+              if (onAuthSuccess) {
+                onAuthSuccess()
+              } else {
+                setTimeout(() => {
+                  authCodeActivate.close()
+                }, 3000)
+              }
+            } else {
+              if (data?.data?.error_code === '104') {
+                if (onAuthSuccess) {
+                  onAuthSuccess()
+                } else {
+                  setTimeout(() => {
+                    authCodeActivate.close()
+                  }, 3000)
+                }
+              } else if (data?.data?.error_code === '142') {
+                setError(copy?.incorrectCodeError || 'Invalid verification code.')
+              } else if (data?.data?.error_code === '154') {
+                setError(copy?.expiredCodeMessage || '')
+              } else {
+                setError(copy?.sendEmailErrorMessage || '')
+              }
+            }
+          },
+        }
+      )
+    }
+
+    // 设置定时器清除状态信息
+    let timer = setTimeout(() => {
+      setMessageStatus('')
+      setMessageText('')
+      clearTimeout(timer)
+    }, 5000)
+
+    gaTrack({
+      event: 'ga4Event',
+      event_name: 'lp_button',
+      event_parameters: {
+        page_group: 'reg_sub_pop',
+        position: 'auth_code',
+        button_name: 'check_and_active',
+      },
+    })
+  }, [
+    code,
+    copy?.codeEmptyError,
+    copy?.authSuccessMessage,
+    copy?.incorrectCodeError,
+    copy?.expiredCodeMessage,
+    copy?.sendEmailErrorMessage,
+    locale,
+    activeToken,
+  ])
+
+  return (
+    <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}
+          />
+          <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 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>
+    </RegistrationModalContainer>
+  )
+}

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

@@ -0,0 +1,23 @@
+export type AuthCodeActivateCopy = {
+  authCodeTitle?: string
+  authCodeDesc?: string
+  enterActiveCodeText?: string
+  authCodeContent?: string
+  authCodeReceiveText?: string
+  sendAgainText?: string
+  buttonText?: string
+  note?: string
+  codeEmptyError?: string
+  incorrectCodeError?: string
+  retrieveText?: string
+  authSuccessMessage?: string
+  sendEmailSuccessMessage?: string
+  sendEmailErrorMessage?: string
+  beenActivatedMessage?: string
+  invalidCodeMessage?: string
+  expiredCodeMessage?: string
+}
+
+export type AuthCodeActivateProps = {
+  copy: AuthCodeActivateCopy
+}

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

@@ -0,0 +1 @@
+export * from './provider'

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

@@ -0,0 +1,86 @@
+import { createContext, Dispatch, PropsWithChildren, SetStateAction, useContext, useState } from 'react'
+import { AuthCodeActivate } from '../authCodeActivate'
+
+interface RegistrationContextType {
+  email?: string
+  copy?: any
+  authCodeActivate: {
+    isOpen: boolean
+    open: () => void
+    close: () => void
+    isActivateSuccess: boolean
+    activeToken?: string
+    onAuthSuccess: (() => void) | undefined
+    isSendingActivateEmail: boolean
+    setIsSendingActivateEmail: Dispatch<SetStateAction<boolean>>
+    setActiveToken: Dispatch<SetStateAction<string | undefined>>
+    setIsActivateSuccess: Dispatch<SetStateAction<boolean>>
+    setOnAuthSuccess: Dispatch<SetStateAction<(() => void) | undefined>>
+    autoSendEmail: boolean
+    setAutoSendEmail: Dispatch<SetStateAction<boolean>>
+  }
+}
+
+export const RegistrationContext = createContext<RegistrationContextType>({
+  email: undefined,
+  copy: undefined,
+  authCodeActivate: {
+    activeToken: undefined,
+    setActiveToken: () => {},
+    isOpen: false,
+    open: () => {},
+    close: () => {},
+    isActivateSuccess: false,
+    isSendingActivateEmail: false,
+    setIsSendingActivateEmail: () => {},
+    setIsActivateSuccess: () => {},
+    setOnAuthSuccess: () => {},
+    onAuthSuccess: undefined,
+    autoSendEmail: false,
+    setAutoSendEmail: () => {},
+  },
+})
+
+export const useRegistration = () => {
+  const context = useContext(RegistrationContext)
+  if (!context) {
+    throw new Error('useRegistration must be used within a RegistrationProvider')
+  }
+  return context
+}
+
+export const RegistrationProvider = ({ children, email, copy }: PropsWithChildren<{ email?: string; copy?: any }>) => {
+  const [popAuthCode, setPopAuthCode] = useState(false)
+  const [onAuthSuccess, setOnAuthSuccess] = useState<(() => void) | undefined>(undefined)
+  const [isActivateSuccess, setIsActivateSuccess] = useState(false)
+  const [activeToken, setActiveToken] = useState<string>()
+  const [isSendingActivateEmail, setIsSendingActivateEmail] = useState(false)
+  const [autoSendEmail, setAutoSendEmail] = useState(false)
+
+  return (
+    <RegistrationContext.Provider
+      value={{
+        email,
+        copy,
+        authCodeActivate: {
+          activeToken,
+          isOpen: popAuthCode,
+          open: () => setPopAuthCode(true),
+          close: () => setPopAuthCode(false),
+          isActivateSuccess,
+          setIsActivateSuccess,
+          onAuthSuccess,
+          setOnAuthSuccess,
+          isSendingActivateEmail,
+          setIsSendingActivateEmail,
+          setActiveToken,
+          autoSendEmail,
+          setAutoSendEmail,
+        },
+      }}
+    >
+      {children}
+      {copy?.authCodeActivate && <AuthCodeActivate copy={copy.authCodeActivate} />}
+    </RegistrationContext.Provider>
+  )
+}

package/src/components/registration/index.ts

@@ -0,0 +1,2 @@
+export * from './authCodeActivate'
+export * from './context'

package/src/components/registration/modalContainer.tsx

@@ -0,0 +1,114 @@
+import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { useEffect, useState, type UIEvent } from 'react'
+import ReactModal from 'react-modal'
+
+export type ModalContainerProps = {
+  overlayClassName?: string
+  className?: string
+  scrollClassName?: string
+  title?: string
+  titleClassName?: string
+  useAnimation?: boolean // 使用动画展示
+  isOpen: boolean
+  children?: any
+  onClose: () => void
+  onScrollEnd?: (event: UIEvent<HTMLDivElement>) => void
+}
+
+export const RegistrationModalContainer = ({
+  isOpen,
+  title,
+  className = '',
+  overlayClassName = '',
+  scrollClassName = '',
+  onClose,
+  onScrollEnd,
+  children,
+  useAnimation = true,
+  titleClassName = '',
+  ...props
+}: ModalContainerProps): React.ReactElement => {
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+  const [animationShow, setAnimationShow] = useState(false)
+
+  useEffect(() => {
+    if (!useAnimation) {
+      return
+    }
+    requestAnimationFrame(() => {
+      setAnimationShow(isOpen ?? false)
+    })
+  }, [isOpen, useAnimation])
+
+  return (
+    <ReactModal
+      isOpen={isOpen ?? false}
+      overlayClassName={cn(
+        'fixed inset-0 z-[999] flex items-center justify-center bg-black/70 leading-[1.2] md:items-end',
+        overlayClassName
+      )}
+      className={cn(
+        '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}
+      {...props}
+    >
+      <div
+        className={cn(
+          'flex w-full shrink-0 items-center justify-between',
+          title ? 'min-l:px-[32px] h-[70px] border-b border-[#e2e2e2] px-[24px]' : 'h-[48px] px-[16px]',
+          titleClassName
+        )}
+      >
+        <div className="text-[18px] font-bold">{title}</div>
+        <div
+          className="size-[22px] cursor-pointer"
+          onClick={onClose}
+          onKeyDown={e => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              onClose?.()
+            }
+          }}
+          role="button"
+          tabIndex={0}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M16.8525 5.31015C16.4558 4.91337 15.8125 4.91338 15.4157 5.31015L11.1268 9.5991L6.83815 5.31049C6.44138 4.91372 5.79808 4.91372 5.40131 5.31049C5.00454 5.70726 5.00455 6.35055 5.40131 6.74732L9.68993 11.0359L5.40105 15.3248C5.00428 15.7216 5.00428 16.3649 5.40105 16.7616C5.79782 17.1584 6.44111 17.1584 6.83788 16.7616L11.1268 12.4728L15.416 16.762C15.8128 17.1588 16.456 17.1588 16.8528 16.762C17.2496 16.3652 17.2496 15.7219 16.8528 15.3252L12.5636 11.0359L16.8525 6.74698C17.2493 6.35021 17.2493 5.70692 16.8525 5.31015ZM16.921 6.02856C16.921 6.22992 16.8441 6.43127 16.6905 6.5849L14.465 8.8104L12.2395 11.0359L12.2395 11.0359L16.6905 6.58493C16.8441 6.43129 16.921 6.22993 16.921 6.02856ZM5.34966 6.19087C5.37992 6.3354 5.45115 6.47307 5.56336 6.58528L10.014 11.0359L10.014 11.0359L5.56336 6.58524C5.45116 6.47304 5.37992 6.33539 5.34966 6.19087ZM5.35087 16.2121C5.38193 16.3541 5.45267 16.4891 5.56309 16.5996C5.87037 16.9068 6.36856 16.9068 6.67583 16.5996L11.1268 12.1486L15.578 16.5999C15.8853 16.9072 16.3835 16.9072 16.6908 16.5999C16.8498 16.4409 16.9265 16.2307 16.9209 16.0223C16.9265 16.2307 16.8498 16.4409 16.6908 16.5999C16.3835 16.9072 15.8853 16.9072 15.578 16.5999L11.1268 12.1487L6.67583 16.5996C6.36856 16.9069 5.87037 16.9069 5.56309 16.5996C5.45267 16.4892 5.38192 16.3541 5.35087 16.2121Z"
+              fill="#333333"
+            />
+          </svg>
+        </div>
+      </div>
+      <div
+        className={cn(
+          'my-[32px] flex-1 overflow-auto overscroll-contain px-[24px] md:mb-[48px]',
+          !title && 'mt-0',
+          'min-l:px-[32px]',
+          scrollClassName
+        )}
+        onScroll={event => {
+          const targetElement = event.target as HTMLDivElement
+
+          if (targetElement.scrollHeight <= targetElement.clientHeight) {
+            return
+          }
+
+          if (targetElement.scrollTop + targetElement.clientHeight >= targetElement.scrollHeight - 50) {
+            onScrollEnd && onScrollEnd(event)
+          }
+        }}
+      >
+        {children}
+      </div>
+    </ReactModal>
+  )
+}

package/src/index.ts

@@ -1 +1,2 @@
-export * from './components/index'
+export * from './components'
+export * from './templates'