@anker-in/campaign-ui 0.5.0-beta.2 → 0.5.0-beta.3

package/src/components/memberPopup/panels/EarnCredits/ActivatePanel.tsx

@@ -1,323 +0,0 @@
-import { useState, useCallback, useRef, useEffect } from 'react'
-import { Button, Text } from '@anker-in/headless-ui'
-import {
-  useSendEmailValidation,
-  gaTrack,
-  classNames as cn,
-  useHeadlessContext,
-  useEmailValidation,
-  useCountDown,
-} from '@anker-in/lib'
-import { Message } from '../../../registration/authCodeActivate/Message'
-import type { AuthCodeActivateCopy } from '../../type'
-import { useRegistration } from '../../../registration'
-import { ROUNDED_BRANDS } from '../../../../constants'
-
-type Props = {
-  copy: AuthCodeActivateCopy
-  onClose: () => void
-  onSuccess?: () => void
-}
-
-export default function ActivatePanel({ copy, onClose, onSuccess }: Props) {
-  const { locale, brand } = useHeadlessContext()
-  const { email } = useRegistration()
-  const rounded = ROUNDED_BRANDS.includes(brand)
-
-  const {
-    isMutating: isSendingEmail,
-    trigger: triggerSendValidationEmail,
-    data: sendEmailData,
-  } = useSendEmailValidation()
-
-  const { isMutating: emailValidationLoading, trigger: triggerEmailValidation } = useEmailValidation()
-
-  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 (email) {
-      triggerSendValidationEmail(
-        {
-          email: email,
-          data: {
-            redirect_url: `${window?.location?.origin}${window?.location?.pathname}`,
-          },
-        },
-        {
-          onSuccess: () => {
-            setMessageStatus('success')
-            setMessageText(copy?.sendEmailSuccessMessage || '')
-            startCountDown()
-            setTimeout(() => {
-              setMessageStatus('')
-              setMessageText('')
-            }, 5000)
-          },
-        }
-      )
-    }
-  }, [email])
-
-  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
-    }
-
-    const token = sendEmailData?.data?.data?.active_token ?? sendEmailData?.data?.active_token
-    if (token) {
-      await triggerEmailValidation(
-        {
-          token: token,
-          code: code,
-        },
-        {
-          onSuccess: data => {
-            if (data.status >= 200 && data.status < 300) {
-              setMessageStatus('success')
-              setMessageText(copy?.authSuccessMessage || '')
-              onSuccess?.()
-              setTimeout(() => {
-                onClose()
-              }, 3000)
-            } else {
-              const errorCode = data?.data?.error_code ?? data?.error_code
-              if (errorCode === '104') {
-                onSuccess?.()
-                setTimeout(() => {
-                  onClose()
-                }, 3000)
-              } else if (errorCode === '142') {
-                setError(copy?.incorrectCodeError || 'Invalid verification code.')
-              } else if (errorCode === '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,
-    sendEmailData,
-    triggerEmailValidation,
-    onClose,
-    onSuccess,
-  ])
-
-  return (
-    <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>
-  )
-}

package/src/components/memberPopup/panels/EarnCredits/CompleteProfileModal.tsx

@@ -1,186 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import { Button, Text } from '@anker-in/headless-ui'
-import { classNames as cn } from '@anker-in/lib'
-import { CreditsModalContainer } from '../../../credits/modal/ModalContainer'
-import type { CompleteProfileCopy } from '../../type'
-import { useUpdateProfile } from './hooks/useUpdateProfile'
-import useCountries from '../../../credits/context/hooks/useCountries'
-import { useMemberPopupContext } from '../../context/provider'
-
-type Props = {
-  isOpen: boolean
-  onClose: () => void
-  onSuccess?: () => void
-  copy: CompleteProfileCopy
-  shopifyStoreDomain?: string
-}
-
-export function CompleteProfileModal({ isOpen, onClose, onSuccess, copy, shopifyStoreDomain = '' }: Props) {
-  const { profile, fetchCreditInfo, alpcConfig } = useMemberPopupContext()
-  const { locale } = alpcConfig
-
-  const [firstName, setFirstName] = useState('')
-  const [lastName, setLastName] = useState('')
-  const [phone, setPhone] = useState('')
-  const [birthDay, setBirthDay] = useState('')
-  const [country, setCountry] = useState('')
-  const [firstNameError, setFirstNameError] = useState('')
-  const [lastNameError, setLastNameError] = useState('')
-
-  const { updateProfile, isLoading } = useUpdateProfile({ locale, appName: alpcConfig.appName })
-  const { countries } = useCountries({ shopifyStoreDomain })
-
-  useEffect(() => {
-    if (profile) {
-      setFirstName(profile.first_name ?? '')
-      setLastName(profile.last_name ?? '')
-      setPhone(profile.phone_number ?? '')
-      setBirthDay(profile.dob ?? '')
-      setCountry(profile.country?.id ?? '')
-    }
-  }, [profile])
-
-  const validate = useCallback(() => {
-    let hasError = false
-    if (!firstName.trim()) {
-      setFirstNameError(copy.required)
-      hasError = true
-    } else {
-      setFirstNameError('')
-    }
-    if (!lastName.trim()) {
-      setLastNameError(copy.required)
-      hasError = true
-    } else {
-      setLastNameError('')
-    }
-    return hasError
-  }, [firstName, lastName, copy.required])
-
-  const handleSubmit = useCallback(async () => {
-    if (validate()) return
-    const success = await updateProfile({
-      first_name: firstName.trim(),
-      last_name: lastName.trim(),
-      phone_number: phone,
-      country,
-      dob: birthDay,
-    })
-    if (success) {
-      fetchCreditInfo(profile?.user_id)
-      onSuccess?.()
-      onClose()
-    }
-  }, [validate, updateProfile, firstName, lastName, phone, country, birthDay, fetchCreditInfo, profile, onSuccess, onClose])
-
-  return (
-    <CreditsModalContainer
-      isOpen={isOpen}
-      onClose={onClose}
-      title={copy.title}
-      titleClassName="!h-auto !border-b-0 !pb-0"
-      className="w-[540px] md:h-auto"
-      useAnimation
-      animationClassName="md:translate-y-[100vh]"
-    >
-      <div className="flex flex-col gap-[20px]">
-        {copy.subtitle && (
-          <Text className="text-[14px] text-[#1d1d1f]" html={copy.subtitle} />
-        )}
-
-        <div>
-          <label className="block text-[14px] font-semibold text-[#1d1d1f]">{copy.email}</label>
-          <input
-            className="mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] bg-[#f5f5f5] px-[12px] text-[14px] text-[#999]"
-            value={profile?.email ?? ''}
-            disabled
-          />
-        </div>
-
-        <div>
-          <label className="block text-[14px] font-semibold text-[#1d1d1f]">
-            {copy.firstName} <span className="text-[#f84d4f]">*</span>
-          </label>
-          <input
-            className={cn(
-              'mt-[8px] h-[46px] w-full rounded-[4px] border px-[12px] text-[14px] outline-none',
-              firstNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]'
-            )}
-            value={firstName}
-            onChange={e => { setFirstName(e.target.value); setFirstNameError('') }}
-          />
-          {firstNameError && <Text className="mt-[4px] text-[12px] text-[#f84d4f]" html={firstNameError} />}
-        </div>
-
-        <div>
-          <label className="block text-[14px] font-semibold text-[#1d1d1f]">
-            {copy.lastName} <span className="text-[#f84d4f]">*</span>
-          </label>
-          <input
-            className={cn(
-              'mt-[8px] h-[46px] w-full rounded-[4px] border px-[12px] text-[14px] outline-none',
-              lastNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]'
-            )}
-            value={lastName}
-            onChange={e => { setLastName(e.target.value); setLastNameError('') }}
-          />
-          {lastNameError && <Text className="mt-[4px] text-[12px] text-[#f84d4f]" html={lastNameError} />}
-        </div>
-
-        <div>
-          <label className="block text-[14px] font-semibold text-[#1d1d1f]">{copy.birthday}</label>
-          <input
-            className="mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none"
-            type="date"
-            value={birthDay}
-            onChange={e => setBirthDay(e.target.value)}
-          />
-        </div>
-
-        <div>
-          <label className="block text-[14px] font-semibold text-[#1d1d1f]">{copy.phone}</label>
-          <input
-            className="mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none"
-            value={phone}
-            onChange={e => setPhone(e.target.value)}
-          />
-        </div>
-
-        <div>
-          <label className="block text-[14px] font-semibold text-[#1d1d1f]">{copy.country}</label>
-          <select
-            className="mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none"
-            value={country}
-            onChange={e => setCountry(e.target.value)}
-          >
-            <option value="" />
-            {countries.map((c: { id: string; name: string }) => (
-              <option key={c.id} value={c.id}>{c.name}</option>
-            ))}
-          </select>
-        </div>
-
-        <div className="flex gap-[12px]">
-          <Button
-            variant="secondary"
-            size="lg"
-            className="flex-1"
-            onClick={onClose}
-            disabled={isLoading}
-          >
-            {copy.cancel}
-          </Button>
-          <Button
-            variant="primary"
-            size="lg"
-            className="flex-1"
-            loading={isLoading}
-            onClick={handleSubmit}
-          >
-            {copy.save}
-          </Button>
-        </div>
-      </div>
-    </CreditsModalContainer>
-  )
-}

package/src/components/memberPopup/panels/EarnCredits/CompleteProfilePanel.tsx

@@ -1,179 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import { Button, Text } from '@anker-in/headless-ui'
-import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
-import type { CompleteProfileCopy } from '../../type'
-import { useUpdateProfile } from './hooks/useUpdateProfile'
-import useCountries from '../../../credits/context/hooks/useCountries'
-import { useMemberPopupContext } from '../../context/provider'
-import { ROUNDED_BRANDS } from '../../../../constants'
-
-type Props = {
-  copy: CompleteProfileCopy
-  shopifyStoreDomain?: string
-  onClose: () => void
-  onSuccess?: () => void
-}
-
-export default function CompleteProfilePanel({ copy, shopifyStoreDomain = '', onClose, onSuccess }: Props) {
-  const { profile, fetchCreditInfo, alpcConfig } = useMemberPopupContext()
-  const { locale } = alpcConfig
-  const { brand } = useHeadlessContext()
-  const rounded = ROUNDED_BRANDS.includes(brand)
-
-  const [firstName, setFirstName] = useState('')
-  const [lastName, setLastName] = useState('')
-  const [phone, setPhone] = useState('')
-  const [birthDay, setBirthDay] = useState('')
-  const [country, setCountry] = useState('')
-  const [firstNameError, setFirstNameError] = useState('')
-  const [lastNameError, setLastNameError] = useState('')
-
-  const { updateProfile, isLoading } = useUpdateProfile({ locale, appName: alpcConfig.appName })
-  const { countries } = useCountries({ shopifyStoreDomain })
-
-  useEffect(() => {
-    if (profile) {
-      setFirstName(profile.first_name ?? '')
-      setLastName(profile.last_name ?? '')
-      setPhone(profile.phone_number ?? '')
-      setBirthDay(profile.dob ?? '')
-      setCountry(profile.country?.id ?? '')
-    }
-  }, [profile])
-
-  const validate = useCallback(() => {
-    let hasError = false
-    if (!firstName.trim()) {
-      setFirstNameError(copy.required)
-      hasError = true
-    } else {
-      setFirstNameError('')
-    }
-    if (!lastName.trim()) {
-      setLastNameError(copy.required)
-      hasError = true
-    } else {
-      setLastNameError('')
-    }
-    return hasError
-  }, [firstName, lastName, copy.required])
-
-  const handleSubmit = useCallback(async () => {
-    if (validate()) return
-    const success = await updateProfile({
-      first_name: firstName.trim(),
-      last_name: lastName.trim(),
-      phone_number: phone,
-      country,
-      dob: birthDay,
-    })
-    if (success) {
-      fetchCreditInfo(profile?.user_id)
-      onSuccess?.()
-      onClose()
-    }
-  }, [validate, updateProfile, firstName, lastName, phone, country, birthDay, fetchCreditInfo, profile, onSuccess, onClose])
-
-  return (
-    <div className="flex flex-col gap-[20px]">
-      {copy.subtitle && (
-        <Text className="text-[14px] text-[#1d1d1f]" html={copy.subtitle} />
-      )}
-
-      <div>
-        <label className="block text-[14px] font-[700] text-[#1d1d1f]">{copy.email}</label>
-        <input
-          className={cn('mt-[8px] h-[46px] w-full border border-[#d8d8d8] bg-[#f5f5f5] px-[12px] text-[14px] text-[#999]', rounded ? 'rounded-[4px]' : 'rounded-none')}
-          value={profile?.email ?? ''}
-          disabled
-        />
-      </div>
-
-      <div>
-        <label className="block text-[14px] font-[700] text-[#1d1d1f]">
-          {copy.firstName} <span className="text-[#f84d4f]">*</span>
-        </label>
-        <input
-          className={cn(
-            'mt-[8px] h-[46px] w-full border px-[12px] text-[14px] outline-none',
-            firstNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]',
-            rounded ? 'rounded-[4px]' : 'rounded-none'
-          )}
-          value={firstName}
-          onChange={e => { setFirstName(e.target.value); setFirstNameError('') }}
-        />
-        {firstNameError && <Text className="mt-[4px] text-[12px] text-[#f84d4f]" html={firstNameError} />}
-      </div>
-
-      <div>
-        <label className="block text-[14px] font-[700] text-[#1d1d1f]">
-          {copy.lastName} <span className="text-[#f84d4f]">*</span>
-        </label>
-        <input
-          className={cn(
-            'mt-[8px] h-[46px] w-full border px-[12px] text-[14px] outline-none',
-            lastNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]',
-            rounded ? 'rounded-[4px]' : 'rounded-none'
-          )}
-          value={lastName}
-          onChange={e => { setLastName(e.target.value); setLastNameError('') }}
-        />
-        {lastNameError && <Text className="mt-[4px] text-[12px] text-[#f84d4f]" html={lastNameError} />}
-      </div>
-
-      <div>
-        <label className="block text-[14px] font-[700] text-[#1d1d1f]">{copy.birthday}</label>
-        <input
-          className={cn('mt-[8px] h-[46px] w-full border border-[#d8d8d8] px-[12px] text-[14px] outline-none', rounded ? 'rounded-[4px]' : 'rounded-none')}
-          type="date"
-          value={birthDay}
-          onChange={e => setBirthDay(e.target.value)}
-        />
-      </div>
-
-      <div>
-        <label className="block text-[14px] font-[700] text-[#1d1d1f]">{copy.phone}</label>
-        <input
-          className={cn('mt-[8px] h-[46px] w-full border border-[#d8d8d8] px-[12px] text-[14px] outline-none', rounded ? 'rounded-[4px]' : 'rounded-none')}
-          value={phone}
-          onChange={e => setPhone(e.target.value)}
-        />
-      </div>
-
-      <div>
-        <label className="block text-[14px] font-[700] text-[#1d1d1f]">{copy.country}</label>
-        <select
-          className={cn('mt-[8px] h-[46px] w-full border border-[#d8d8d8] px-[12px] text-[14px] outline-none', rounded ? 'rounded-[4px]' : 'rounded-none')}
-          value={country}
-          onChange={e => setCountry(e.target.value)}
-        >
-          <option value="" />
-          {countries.map((c: { id: string; name: string }) => (
-            <option key={c.id} value={c.id}>{c.name}</option>
-          ))}
-        </select>
-      </div>
-
-      <div className="flex gap-[12px]">
-        <Button
-          variant="secondary"
-          size="lg"
-          className="flex-1"
-          onClick={onClose}
-          disabled={isLoading}
-        >
-          {copy.cancel}
-        </Button>
-        <Button
-          variant="primary"
-          size="lg"
-          className="flex-1"
-          loading={isLoading}
-          onClick={handleSubmit}
-        >
-          {copy.save}
-        </Button>
-      </div>
-    </div>
-  )
-}