You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
200 lines
6.7 KiB
200 lines
6.7 KiB
import React, { useState, useEffect } from "react"; |
|
import Navbar from "../../components/Navbar"; |
|
import Footer from "../Home/Footer"; |
|
import Input from "../../components/Input"; |
|
import onInput from "../../util/onInput"; |
|
import Textarea from "../../components/Textarea"; |
|
import Select from "../../components/Select"; |
|
import Location from "../../components/Location"; |
|
import { connect } from "react-redux"; |
|
import scroll from "../../util/scroll"; |
|
import { publicApi } from "../../redux/actions"; |
|
import _ from "lodash"; |
|
|
|
interface FormData { |
|
name?: string; |
|
cellphone?: string; |
|
departman?: string; |
|
text?: string; |
|
} |
|
|
|
function Contact({ |
|
departmans, |
|
selectedDepartman, |
|
contactData, |
|
getContactData, |
|
theme, |
|
}: any) { |
|
const [formData, setFormData] = useState<FormData | undefined>(undefined); |
|
const [unit, setUnit] = useState("info"); |
|
const onChange = (e: any) => { |
|
setFormData({ ...formData, [e.target.name]: e.target.value }); |
|
}; |
|
|
|
useEffect(() => { |
|
scroll.goToTop(); |
|
getContactData(); |
|
}, []); |
|
const light = theme === "light"; |
|
return ( |
|
<div |
|
className={_.join( |
|
[ |
|
"contact main d-flex flex-column", |
|
light ? "contact-light bg-white" : "contact-dark bg-black", |
|
], |
|
" " |
|
)} |
|
> |
|
<Navbar /> |
|
<main className="d-flex flex-column"> |
|
<header> |
|
<h1>تماس با ما</h1> |
|
</header> |
|
<div className="mobile flex-column"> |
|
<div className="d-flex contact__tab"> |
|
<figure |
|
className={unit !== "info" ? "contact__tab--figureactive" : ""} |
|
></figure> |
|
<button |
|
className={unit === "info" ? "contact__tab--active" : ""} |
|
onClick={() => setUnit("info")} |
|
> |
|
اطلاعات تماس |
|
</button> |
|
<button |
|
className={unit === "form" ? "contact__tab--active" : ""} |
|
onClick={() => setUnit("form")} |
|
> |
|
فرم تماس |
|
</button> |
|
</div> |
|
{unit === "info" && ( |
|
<section className="contact__info d-flex flex-column py-3"> |
|
<div className="d-flex flex-column"> |
|
<div className="contact__info--data d-flex flex-column"> |
|
<h2>آدرس</h2> |
|
<p>{contactData?.address}</p> |
|
</div> |
|
<div className="contact__info--data d-flex flex-column"> |
|
<h2>شماره تماس</h2> |
|
<p>{contactData?.cellphone}</p> |
|
</div> |
|
<div className="contact__info--data d-flex flex-column"> |
|
<h2>ایمیل</h2> |
|
<p>{contactData?.email}</p> |
|
</div> |
|
</div> |
|
<div className="contact__info--map d-flex"> |
|
<Location /> |
|
</div> |
|
</section> |
|
)} |
|
{unit === "form" && ( |
|
<section className="contact__form d-flex flex-column"> |
|
<form action=""> |
|
<div className="contact__form--name"> |
|
<Input |
|
name="name" |
|
label="نام" |
|
align="right" |
|
onInput={onInput.persianOnly} |
|
onChange={onChange} |
|
/> |
|
</div> |
|
<div className="contact__form--name"> |
|
<Input |
|
name="cellphone" |
|
label="شماره موبایل" |
|
align="left" |
|
onInput={onInput.numberOnly} |
|
onChange={onChange} |
|
/> |
|
</div> |
|
<Select |
|
onChange={onChange} |
|
options={departmans} |
|
name="departman" |
|
label={"انتخاب دپارتمان"} |
|
selectedOptions={selectedDepartman} |
|
/> |
|
<Textarea |
|
theme={theme} |
|
placeholder="متن پیام را اینجا تایپ کنید" |
|
/> |
|
<div className="d-flex justify-content-end py-4"> |
|
<button className="submit submit-large">ارسال پیام</button> |
|
</div> |
|
</form> |
|
</section> |
|
)} |
|
</div> |
|
<div className="desktop py-5"> |
|
<section className="contact__form d-flex flex-column"> |
|
<form action="" className="main-311"> |
|
<div className="contact__form--name"> |
|
<Input |
|
name="name" |
|
label="نام" |
|
align="right" |
|
onInput={onInput.persianOnly} |
|
onChange={onChange} |
|
/> |
|
</div> |
|
<div className="contact__form--name"> |
|
<Input |
|
name="cellphone" |
|
label="شماره موبایل" |
|
align="left" |
|
onInput={onInput.numberOnly} |
|
onChange={onChange} |
|
/> |
|
</div> |
|
<Select |
|
onChange={onChange} |
|
options={departmans} |
|
name="departman" |
|
label={"انتخاب دپارتمان"} |
|
selectedOptions={selectedDepartman} |
|
/> |
|
<Textarea theme={theme} placeholder="متن پیام را اینجا تایپ کنید" /> |
|
<div className="d-flex justify-content-end py-4"> |
|
<button className="submit submit-large">ارسال پیام</button> |
|
</div> |
|
</form> |
|
</section> |
|
<section className="contact__info d-flex flex-column py-3"> |
|
<div className="d-flex flex-wrap justify-content-between"> |
|
<div className="contact__info--data d-flex flex-column"> |
|
<h2>آدرس</h2> |
|
<p>{contactData?.address}</p> |
|
</div> |
|
<div className="contact__info--data d-flex flex-column"> |
|
<h2>شماره تماس</h2> |
|
<p>{contactData?.cellphone}</p> |
|
</div> |
|
<div className="contact__info--data d-flex flex-column"> |
|
<h2>ایمیل</h2> |
|
<p>{contactData?.email}</p> |
|
</div> |
|
</div> |
|
<div className="contact__info--map d-flex"> |
|
<Location /> |
|
</div> |
|
</section> |
|
</div> |
|
</main> |
|
<Footer /> |
|
</div> |
|
); |
|
} |
|
|
|
export default connect( |
|
(state: any) => ({ |
|
departmans: state.publicApi.departmans, |
|
selectedDepartman: state.publicApi.selectedDepartman, |
|
contactData: state.publicApi.contactData, |
|
theme: state.publicApi.theme, |
|
}), |
|
{ getContactData: publicApi.getContactData } |
|
)(Contact);
|
|
|