hamid zarghami
127 lines
5.0 KiB
TypeScript
127 lines
5.0 KiB
TypeScript
import { FC, Fragment, useState } from 'react'
|
||
import Input from '../../../components/Input'
|
||
import { Edit, TickCircle } from 'iconsax-react'
|
||
import { useTranslation } from 'react-i18next'
|
||
import Button from '../../../components/Button'
|
||
import { isEmail } from '../../../config/func'
|
||
import DefaulModal from '../../../components/DefaulModal'
|
||
import OTPInput from 'react-otp-input'
|
||
import { useUpdateEmail } from '../hooks/useProfileData'
|
||
import { ErrorType } from '../../../helpers/types'
|
||
import { toast } from 'react-toastify'
|
||
|
||
type Props = {
|
||
email: string | null,
|
||
isVerified: boolean
|
||
}
|
||
|
||
const Email: FC<Props> = (props: Props) => {
|
||
|
||
const { t } = useTranslation('global')
|
||
const [email, setEmail] = useState<string>(props.email ? props.email : '')
|
||
const [isReadOnly, setIsReadOnly] = useState<boolean>(true)
|
||
const [showModal, setShowModal] = useState<boolean>(false)
|
||
const [code, setCode] = useState<string>('')
|
||
const updateEmail = useUpdateEmail()
|
||
|
||
const handleShowModal = () => {
|
||
updateEmail.mutate({ email: email }, {
|
||
onSuccess: () => {
|
||
toast.success(t('profile.link_email'))
|
||
},
|
||
onError: (error: ErrorType) => {
|
||
toast.error(error.response?.data?.error.message[0])
|
||
}
|
||
})
|
||
}
|
||
|
||
return (
|
||
<Fragment>
|
||
<div className='flex relative items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
|
||
<Input
|
||
label={t('email')}
|
||
value={email}
|
||
readOnly={isReadOnly}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
/>
|
||
{
|
||
!props.isVerified &&
|
||
<div className='text-[10px] absolute left-24 text-red-400 top-[34px]'>
|
||
{t('profile.email_not_verified')}
|
||
</div>
|
||
}
|
||
{
|
||
isReadOnly ?
|
||
<div onClick={() => setIsReadOnly(false)} className='flex cursor-pointer relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
|
||
<Edit className='xl:size-[18px] size-4' color='#0047FF' />
|
||
<div>
|
||
{t('edit')}
|
||
</div>
|
||
</div>
|
||
:
|
||
<Button
|
||
label={t('save')}
|
||
className='px-4 w-fit'
|
||
disabled={!isEmail(email)}
|
||
onClick={handleShowModal}
|
||
isLoading={updateEmail.isPending}
|
||
/>
|
||
}
|
||
</div>
|
||
|
||
<DefaulModal
|
||
open={showModal}
|
||
close={() => setShowModal(false)}
|
||
isHeader
|
||
title_header={t('profile.confrim_email')}
|
||
>
|
||
<div className='mt-7'>
|
||
<div className='text-xs text-center'>
|
||
کد تایید به ایمیل {email} ارسال شده است.برای تایید کد مربوطه را وارد کنید.
|
||
</div>
|
||
|
||
<div className='mt-10'>کد تایید</div>
|
||
<div className='mt-2 w-full flex justify-center dltr otp'>
|
||
<OTPInput
|
||
value={code}
|
||
onChange={setCode}
|
||
shouldAutoFocus
|
||
renderInput={(props) =>
|
||
<input
|
||
{...props}
|
||
type='tel'
|
||
autoComplete="one-time-code"
|
||
inputMode="numeric"
|
||
className='w-full h-[50px] flex-1 mx-2 bg-white bg-opacity-30 border rounded-2.5' />
|
||
}
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-14 flex justify-end border-t border-border pt-8'>
|
||
<div className='flex gap-5'>
|
||
<Button
|
||
className='bg-white bg-opacity-40 text-description w-[150px] text-xs'
|
||
label='لغو'
|
||
onClick={() => setShowModal(false)}
|
||
/>
|
||
<Button
|
||
className='w-[150px] text-xs'
|
||
>
|
||
<div className='flex gap-2 items-center'>
|
||
<TickCircle
|
||
size={20}
|
||
color='white'
|
||
/>
|
||
<div>{t('wallet.submit_slip')}</div>
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</DefaulModal>
|
||
</Fragment>
|
||
)
|
||
}
|
||
|
||
export default Email |