@anker-in/campaign-ui 0.2.10-beta.8 → 0.2.11-beta.2

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

@@ -1,9 +1,13 @@
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import classNames from 'classnames'
 import { useState } from 'react'
 
 function Tip({ info, index }: { info: string; index: number }) {
   const [show, setShow] = useState(false)
 
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
   return (
     <div
       className="relative ml-[6px] cursor-pointer"
@@ -81,7 +85,12 @@ function Tip({ info, index }: { info: string; index: number }) {
                 }
           }
         ></i>
-        <p className="relative block rounded-[4px] bg-white px-[14px] py-[12px]">
+        <p
+          className={classNames(
+            'relative block rounded-[4px] bg-white px-[14px] py-[12px]',
+            !rounded && 'rounded-none'
+          )}
+        >
           <span className="block text-left text-[14px] font-semibold leading-[1.4] text-[#333]">{info}</span>
         </p>
       </div>

package/src/components/credits/type.ts

@@ -1,5 +1,7 @@
-import type { Product, ProductVariant } from '@anker-in/shopify'
+import type { Product, ProductVariant } from '@anker-in/lib'
 import type { AlpcConsumeType, ConsumeType } from './context/const'
+import { MyActivitiesMetafields } from './modal/activitiesModal'
+import { MyRewardsMetafields } from './modal/MyRewardsModal'
 
 export interface Subscription {
   preference: {
@@ -49,12 +51,29 @@ export interface ShippingZone {
 }
 
 export type CreditsPageCommon = {
-  pointUnit: string
-  ruleLabel: string
-  soldOut: string
-  imageMapping: {
+  pointUnit?: string
+  infoIcon?: string
+  ruleLabel?: string
+  soldOut?: string
+  copied?: string
+  off?: string
+  copy?: string
+  giftCardLabel?: string
+  imageMapping?: {
     [key in ConsumeType]: {
       url: string
     }
   }
+  activitiesModal?: MyActivitiesMetafields
+  rewardsModal?: MyRewardsMetafields
+  insufficientCredits?: string
+  validatorInfo?: {
+    addressInfo: {
+      name: string
+      country: string
+      province: string
+      city: string
+      address: string
+    }
+  }
 }

package/src/components/index.ts

@@ -1,5 +1,3 @@
-// eslint-disable-next-line import/extensions
-
 export { default as Chat } from './chat/index'
 
 export {
@@ -12,3 +10,5 @@ export {
 } from './chat/utils'
 
 export * from './credits/index'
+
+export * from './registration/index'

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

@@ -0,0 +1,43 @@
+export const Message = ({ status, message }: { status: string; message: string }) => {
+  return (
+    status && (
+      <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">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clipPath="url(#clip0_205_16388)">
+                  <circle cx="10" cy="10" r="10" fill="#1677FF" />
+                  <path d="M10 16L10 10" stroke="white" strokeWidth="2" strokeLinecap="round" />
+                  <circle cx="10" cy="6.5" r="1.5" transform="rotate(-180 10 6.5)" fill="white" />
+                </g>
+                <defs>
+                  <clipPath id="clip0_205_16388">
+                    <rect width="20" height="20" fill="white" />
+                  </clipPath>
+                </defs>
+              </svg>
+            </span>
+          )}
+          {status === 'error' && (
+            <span className="inline-block h-5 w-5">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clipPath="url(#clip0_205_16236)">
+                  <circle cx="10" cy="10" r="10" fill="#F84D4F" />
+                  <path d="M10 5L10 11" stroke="white" strokeWidth="2" strokeLinecap="round" />
+                  <circle cx="10" cy="14.5" r="1.5" fill="white" />
+                </g>
+                <defs>
+                  <clipPath id="clip0_205_16236">
+                    <rect width="20" height="20" fill="white" />
+                  </clipPath>
+                </defs>
+              </svg>
+            </span>
+          )}
+        </div>
+        <p className="text-sm font-semibold leading-[120%] text-[#333]">{message}</p>
+      </div>
+    )
+  )
+}

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'