From 8c1f7c7501c64042a7ee0e24cdb674f91837355a Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Tue, 22 Apr 2025 15:29:05 +0330
Subject: [PATCH] meta fix bug

---
 src/app/contact/ContactForm.tsx | 150 ++++++++++++++++++++++++++++++++
 src/app/contact/page.tsx        | 149 +------------------------------
 2 files changed, 154 insertions(+), 145 deletions(-)
 create mode 100644 src/app/contact/ContactForm.tsx

diff --git a/src/app/contact/ContactForm.tsx b/src/app/contact/ContactForm.tsx
new file mode 100644
index 0000000..f2176bd
--- /dev/null
+++ b/src/app/contact/ContactForm.tsx
@@ -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
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 105bd1d..2c516c1 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -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
\ No newline at end of file
+export default ContactPage
\ No newline at end of file