contact us

src/app/contact/hooks/useContactData.ts

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

src/app/contact/page.tsx

@@ -1,3 +1,4 @@
+'use client'
 import Input from '@/components/Input'
 import { Textarea } from '@/components/ui/textarea'
 import { Button } from '@/components/ui/button'
@@ -5,8 +6,33 @@ import Layout from '@/hoc/Layout'
 import { NextPage } from 'next'
 import Image from 'next/image'
 import { Call, Location, Sms } from 'iconsax-react'
+import { useForm } from 'react-hook-form'
+import { ContactUsType } from './types/Types'
+import { useContactUs } from './hooks/useContactData'
+import { useState } from 'react'
+import { toast } from '@/components/Toast'
+import { extractErrorMessage } from '@/helpers/errorUtils'
 
 const ContactPage: NextPage = () => {
+
+    const { mutate: contactUs, isPending } = useContactUs()
+    const { register, handleSubmit, reset, formState: { errors } } = useForm<ContactUsType>()
+    const [successMessage, setSuccessMessage] = useState<string>('')
+
+    const onSubmit = (data: ContactUsType) => {
+        contactUs(data, {
+            onSuccess: () => {
+                toast('پیام شما با موفقیت ارسال شد.', 'success')
+                setSuccessMessage('پیام شما با موفقیت ارسال شد.')
+                reset()
+                setTimeout(() => setSuccessMessage(''), 5000)
+            },
+            onError: (error) => {
+                toast(extractErrorMessage(error), 'error')
+            }
+        })
+    }
+
     return (
         <Layout>
             <div className='mt-14 px-4 sm:px-8 lg:px-20'>
@@ -15,26 +41,47 @@ const ContactPage: NextPage = () => {
                         <h1 className='font-black text-xl sm:text-2xl'>ارتباط با ما</h1>
                         <p className='text-[#7F7F7F] mt-3 font-light text-sm sm:text-base'>اطلاعات تماس و متن پیام خود را وارد کنید</p>
 
-                        <div className='mt-8 sm:mt-12'>
+                        {successMessage && (
+                            <div className='mt-4 p-3 bg-green-100 border border-green-400 text-green-700 rounded-md'>
+                                {successMessage}
+                            </div>
+                        )}
+
+                        <form onSubmit={handleSubmit(onSubmit)} className='mt-8 sm:mt-12'>
                             <Input
                                 placeholder='نام و نام خانوادگی'
+                                {...register('fullName', { required: 'نام و نام خانوادگی الزامی است' })}
                             />
+                            {errors.fullName && (
+                                <p className='text-red-500 text-sm mt-1'>{errors.fullName.message}</p>
+                            )}
+
                             <Input
-                                placeholder='شماره تماس'
-                                className='mt-4 sm:mt-6'
-                            />
-                            <Input
-                                placeholder='ایمیل'
+                                placeholder='شماره تماس یا ایمیل'
                                 className='mt-4 sm:mt-6'
+                                {...register('email_phone', { required: 'شماره تماس یا ایمیل الزامی است' })}
                             />
+                            {errors.email_phone && (
+                                <p className='text-red-500 text-sm mt-1'>{errors.email_phone.message}</p>
+                            )}
 
                             <Textarea
                                 placeholder='متن پیام'
                                 className='mt-4 sm:mt-6 h-[100px] sm:h-[120px]'
+                                {...register('message', { required: 'متن پیام الزامی است' })}
                             />
+                            {errors.message && (
+                                <p className='text-red-500 text-sm mt-1'>{errors.message.message}</p>
+                            )}
 
-                            <Button className='mt-4 sm:mt-6 w-full'>ارسال پیام</Button>
-                        </div>
+                            <Button
+                                type='submit'
+                                className='mt-4 sm:mt-6 w-full'
+                                disabled={isPending}
+                            >
+                                {isPending ? 'در حال ارسال...' : 'ارسال پیام'}
+                            </Button>
+                        </form>
                     </div>
 
                     <div className='flex-1'>

src/app/contact/service/Service.ts

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

src/app/contact/types/Types.ts

@@ -0,0 +1,5 @@
+export type ContactUsType = {
+  fullName: string;
+  email_phone: string;
+  message: string;
+};