meta fix bug
This commit is contained in:
hamid zarghami
@@ -0,0 +1,150 @@
|
||||
'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 { toast } from 'react-toastify'
|
||||
import { ErrorType } from '@/helpers/types'
|
||||
|
||||
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(error.response?.data?.error.message[0])
|
||||
}
|
||||
})
|
||||
},
|
||||
})
|
||||
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
|
||||
+4
-145
@@ -1,16 +1,5 @@
|
||||
'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 { NextPage } from 'next'
|
||||
import React from 'react'
|
||||
import { CreateContactType } from './types/ContactTypes'
|
||||
import { useFormik } from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
import { useCreateContact } from './hooks/useContactData'
|
||||
import { toast } from 'react-toastify'
|
||||
import { ErrorType } from '@/helpers/types'
|
||||
import ContactForm from './ContactForm'
|
||||
|
||||
export const metadata = {
|
||||
title: 'داناک | تماس با ما',
|
||||
@@ -23,140 +12,10 @@ export const metadata = {
|
||||
},
|
||||
}
|
||||
|
||||
const Contact: NextPage = () => {
|
||||
|
||||
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(error.response?.data?.error.message[0])
|
||||
}
|
||||
})
|
||||
},
|
||||
})
|
||||
const ContactPage = () => {
|
||||
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>
|
||||
<ContactForm />
|
||||
)
|
||||
}
|
||||
|
||||
export default Contact
|
||||
export default ContactPage
|
||||
Reference in New Issue
Block a user