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 React from 'react'
|
||||||
import { CreateContactType } from './types/ContactTypes'
|
import ContactForm from './ContactForm'
|
||||||
import { useFormik } from 'formik'
|
|
||||||
import * as Yup from 'yup'
|
|
||||||
import { useCreateContact } from './hooks/useContactData'
|
|
||||||
import { toast } from 'react-toastify'
|
|
||||||
import { ErrorType } from '@/helpers/types'
|
|
||||||
|
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
title: 'داناک | تماس با ما',
|
title: 'داناک | تماس با ما',
|
||||||
@@ -23,140 +12,10 @@ export const metadata = {
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
const Contact: NextPage = () => {
|
const ContactPage = () => {
|
||||||
|
|
||||||
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 (
|
return (
|
||||||
<div className='mt-24 max-w-maxWidth mx-auto'>
|
<ContactForm />
|
||||||
<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 Contact
|
export default ContactPage
|
||||||
Reference in New Issue
Block a user