blogs

src/app/contact/hooks/useContactData.ts

@@ -0,0 +1,8 @@
+import { useMutation } from "@tanstack/react-query";
+import * as api from "../service/ContactService";
+
+export const useCreateContact = () => {
+  return useMutation({
+    mutationFn: api.createContact,
+  });
+};

src/app/contact/page.tsx

@@ -1,11 +1,47 @@
+'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'
 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])
+                }
+            })
+        },
+    })
     return (
         <div className='mt-24 max-w-maxWidth mx-auto'>
             <h1 className='text-2xl font-bold'>
@@ -62,23 +98,33 @@ const Contact: NextPage = () => {
                     <div className='rowTwoInput mt-8'>
                         <Input
                             placeholder='نام و نام خانوادگی'
+                            {...formik.getFieldProps('fullName')}
+                            error_text={formik.touched.fullName && formik.errors.fullName ? formik.errors.fullName : undefined}
                         />
                         <Input
                             placeholder='نام شرکت '
+                            {...formik.getFieldProps('businessName')}
+                            error_text={formik.touched.businessName && formik.errors.businessName ? formik.errors.businessName : undefined}
                         />
                     </div>
                     <div className='rowTwoInput mt-8'>
                         <Input
                             placeholder='شماره تماس'
+                            {...formik.getFieldProps('phone')}
+                            error_text={formik.touched.phone && formik.errors.phone ? formik.errors.phone : undefined}
                         />
                         <Input
                             placeholder='ایمیل'
+                            {...formik.getFieldProps('email')}
+                            error_text={formik.touched.email && formik.errors.email ? formik.errors.email : undefined}
                         />
                     </div>
 
                     <div className='mt-8'>
                         <Textarea
                             label='پیام'
+                            {...formik.getFieldProps('content')}
+                            error_text={formik.touched.content && formik.errors.content ? formik.errors.content : undefined}
                         />
                     </div>
 
@@ -86,6 +132,8 @@ const Contact: NextPage = () => {
                         <Button
                             label='ارسال'
                             className='w-fit px-8'
+                            onClick={() => formik.handleSubmit()}
+                            isLoading={createContact.isPending}
                         />
                     </div>
                 </div>

src/app/contact/service/ContactService.ts

@@ -0,0 +1,7 @@
+import axios from "@/config/axios";
+import { CreateContactType } from "../types/ContactTypes";
+
+export const createContact = async (params: CreateContactType) => {
+  const { data } = await axios.post("/contact-us", params);
+  return data;
+};

src/app/contact/types/ContactTypes.ts

@@ -0,0 +1,7 @@
+export type CreateContactType = {
+  fullName: string;
+  email: string;
+  phone: string;
+  businessName: string;
+  content: string;
+};