hamid zarghami
151 lines
6.4 KiB
TypeScript
151 lines
6.4 KiB
TypeScript
'use client'
|
||
import Button from '@/components/Button'
|
||
import Input from '@/components/Input'
|
||
import Textarea from '@/components/Textarea'
|
||
import { CallCalling, Location, SmsTracking } from 'iconsax-react'
|
||
import React from 'react'
|
||
import { CreateContactType } from './types/ContactTypes'
|
||
import { useFormik } from 'formik'
|
||
import * as Yup from 'yup'
|
||
import { useCreateContact } from './hooks/useContactData'
|
||
import { ErrorType } from '@/helpers/types'
|
||
import { toast } from '@/components/Toast'
|
||
|
||
const ContactForm = () => {
|
||
|
||
const createContact = useCreateContact()
|
||
|
||
const formik = useFormik<CreateContactType>({
|
||
initialValues: {
|
||
fullName: '',
|
||
email: '',
|
||
phone: '',
|
||
businessName: '',
|
||
content: '',
|
||
},
|
||
validationSchema: Yup.object({
|
||
fullName: Yup.string().required('نام وارد کنید'),
|
||
email: Yup.string().email('ایمیل معتبر وارد کنید').required('ایمیل وارد کنید'),
|
||
phone: Yup.string().required('شماره تماس وارد کنید'),
|
||
businessName: Yup.string().required('نام شرکت وارد کنید'),
|
||
content: Yup.string().required('پیام وارد کنید'),
|
||
}),
|
||
onSubmit: (values) => {
|
||
createContact.mutate(values, {
|
||
onSuccess: () => {
|
||
toast('پیام شما با موفقیت ثبت شد', 'success')
|
||
formik.resetForm()
|
||
},
|
||
onError: (error: ErrorType) => {
|
||
toast(error.response?.data?.error.message[0] || 'An error occurred', 'error')
|
||
}
|
||
})
|
||
},
|
||
})
|
||
return (
|
||
<div className='mt-24 max-w-maxWidth mx-auto'>
|
||
<h1 className='text-2xl font-bold'>
|
||
تماس با ما
|
||
</h1>
|
||
|
||
<div className='flex xl:flex-row flex-col gap-24 mt-14 items-center'>
|
||
<div className='xl:max-w-[300px]'>
|
||
<div className='font-bold text-lg'>
|
||
شماره تماس
|
||
</div>
|
||
<div className='flex gap-4 mt-4 items-center'>
|
||
<CallCalling
|
||
size={24}
|
||
color='black'
|
||
/>
|
||
<div className='text-sm'>
|
||
۰۲۱-۹۱۶۹۳۵۳۳
|
||
</div>
|
||
</div>
|
||
|
||
<div className='font-bold text-lg mt-8'>
|
||
ایمیل
|
||
</div>
|
||
<div className='flex gap-4 mt-4 items-center'>
|
||
<SmsTracking
|
||
size={24}
|
||
color='black'
|
||
/>
|
||
<div className='text-sm'>
|
||
info@danakcorp.com
|
||
</div>
|
||
</div>
|
||
|
||
<div className='font-bold text-lg mt-8'>
|
||
آدرس
|
||
</div>
|
||
<div className='flex gap-4 mt-4 items-center'>
|
||
<Location
|
||
size={24}
|
||
color='black'
|
||
/>
|
||
<div className='text-sm'>
|
||
تهران - یوسف آباد - فتحی شقاقی - پلاک ۵ - واحد ۱۳
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='flex-1 w-full bg-[#F1F3F8] rounded-4xl xl:p-10 p-5 border-2 border-white'>
|
||
<div className='text-lg font-bold'>
|
||
فرم تماس
|
||
</div>
|
||
|
||
<div className='rowTwoInput mt-8'>
|
||
<Input
|
||
placeholder='نام و نام خانوادگی'
|
||
{...formik.getFieldProps('fullName')}
|
||
error_text={formik.touched.fullName && formik.errors.fullName ? formik.errors.fullName : undefined}
|
||
className='border-t-0 border-x-0 rounded-none place-black'
|
||
/>
|
||
<Input
|
||
placeholder='نام شرکت '
|
||
{...formik.getFieldProps('businessName')}
|
||
error_text={formik.touched.businessName && formik.errors.businessName ? formik.errors.businessName : undefined}
|
||
className='border-t-0 border-x-0 rounded-none place-black'
|
||
/>
|
||
</div>
|
||
<div className='rowTwoInput mt-8'>
|
||
<Input
|
||
placeholder='شماره تماس'
|
||
{...formik.getFieldProps('phone')}
|
||
error_text={formik.touched.phone && formik.errors.phone ? formik.errors.phone : undefined}
|
||
className='border-t-0 border-x-0 rounded-none place-black'
|
||
/>
|
||
<Input
|
||
placeholder='ایمیل'
|
||
{...formik.getFieldProps('email')}
|
||
error_text={formik.touched.email && formik.errors.email ? formik.errors.email : undefined}
|
||
className='border-t-0 border-x-0 rounded-none place-black'
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-8'>
|
||
<Textarea
|
||
placeholder='پیام'
|
||
{...formik.getFieldProps('content')}
|
||
error_text={formik.touched.content && formik.errors.content ? formik.errors.content : undefined}
|
||
className='border-t-0 border-x-0 place-black rounded-none min-h-[40px]'
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-8 flex justify-end'>
|
||
<Button
|
||
label='ارسال'
|
||
className='w-fit px-8'
|
||
onClick={() => formik.handleSubmit()}
|
||
isLoading={createContact.isPending}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default ContactForm
|