@anker-in/campaign-ui 0.4.7 → 0.5.0-beta.1

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

@@ -0,0 +1,323 @@
+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

@@ -0,0 +1,186 @@
+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

@@ -0,0 +1,179 @@
+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>
+  )
+}