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

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);