125 lines
3.7 KiB
TypeScript
125 lines
3.7 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react'
|
|
import { FaInstagram, FaLinkedinIn, FaTwitter } from "react-icons/fa6";
|
|
import { Button, Form } from 'react-bootstrap';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { toast } from 'react-toastify';
|
|
import { IoMailOutline,IoEarthOutline } from "react-icons/io5";
|
|
import { FiPhone } from "react-icons/fi";
|
|
import { FaFacebookF } from "react-icons/fa";
|
|
import { useAddSupportMessage } from '../../../api/supportMessages';
|
|
|
|
const ContactTab = ({className=""}: {className?: string }) => {
|
|
const form = useRef<any>(null);
|
|
const { t } = useTranslation();
|
|
const {mutate,isSuccess,isLoading} = useAddSupportMessage()
|
|
|
|
const SoicalInfo: { icon: any; text: string }[] = [
|
|
{
|
|
icon: <IoMailOutline/>,
|
|
text: "info@yourdomain.com",
|
|
},
|
|
{
|
|
icon: <FiPhone/> ,
|
|
text: "+1 (378) 400-1234",
|
|
},
|
|
{
|
|
icon: <IoEarthOutline/>,
|
|
text: "www.yourdomain.com",
|
|
},
|
|
];
|
|
|
|
const SoicalIcons: { icon: any; }[] = [
|
|
{
|
|
icon: <FaFacebookF/>,
|
|
},
|
|
{
|
|
icon: <FaTwitter /> ,
|
|
},
|
|
{
|
|
icon: <FaLinkedinIn />,
|
|
},
|
|
{
|
|
icon: <FaInstagram />,
|
|
},
|
|
];
|
|
|
|
const [Name , setName] = useState('')
|
|
const [Email , setEmail] = useState('')
|
|
const [Message , setMessage] = useState('')
|
|
|
|
const sendEmail = (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
if(!Name || !Email || !Message ){
|
|
toast.error(t("please_fill_all_input"))
|
|
}else{
|
|
}
|
|
mutate({
|
|
name:Name,
|
|
email:Email,
|
|
message:Message
|
|
})
|
|
|
|
|
|
};
|
|
|
|
|
|
useEffect(() => {
|
|
if(isSuccess){
|
|
setMessage('')
|
|
setName('')
|
|
setEmail('')
|
|
toast.success(t("Send Successfully"))
|
|
|
|
}
|
|
}, [isSuccess])
|
|
|
|
|
|
return (
|
|
<div className={`${className} contact_last_section`}>
|
|
<div className='left'>
|
|
<div className='social_info'>
|
|
{
|
|
SoicalInfo.map((item)=>(
|
|
<div className='Single_info'>
|
|
<span>{item.icon}</span>
|
|
<p>{item.text}</p>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
<div className='icons'>
|
|
{
|
|
SoicalIcons.map((item)=>(
|
|
<span>{item.icon}</span>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div className='right'>
|
|
<Form ref={form} onSubmit={sendEmail} className='contact_form'>
|
|
<Form.Group controlId="formName">
|
|
<Form.Control type="text" name="to_name" placeholder={t('* Your Name')} value={Name} onChange={(e)=>setName(e.target.value)} required autoFocus />
|
|
</Form.Group>
|
|
<Form.Group controlId="formEmail">
|
|
<Form.Control type="email" name="from_name" placeholder={t('* Email')} value={Email} onChange={(e)=>setEmail(e.target.value)} required/>
|
|
</Form.Group>
|
|
<Form.Group controlId="formMessage">
|
|
<Form.Control as="textarea" rows={6} name="message" placeholder={t('Message')}value={Message} onChange={(e)=>setMessage(e.target.value)} required />
|
|
</Form.Group>
|
|
<div className='button_container'>
|
|
<Button disabled={isLoading} className='mt-4 w-100 button' type="submit">
|
|
{t('Submit')}
|
|
</Button>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ContactTab |