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.
 
 
 
 

177 lines
6.4 KiB

import React, { useState, useEffect } from "react";
import "./index.scss";
import Navbar from "../../components/Navbar/index";
import Footer from "../../views/Home/Footer/index";
import Input from "../../components/Input/index";
import onInput from "../../util/onInput";
import Textarea from "../../components/Textarea/index";
import Select from "../../components/Select/index";
import Location from "../../components/Location/index";
import { connect } from "react-redux";
import scroll from "../../util/scroll";
import { publicApi } from "../../redux/actions";
interface FormData {
name?: string;
cellphone?: string;
departman?: string;
text?: string;
}
function Contact({ departmans, selectedDepartman, contactData, getContactData }: 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();
}, []);
return (
<div className="contact main d-flex flex-column">
<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 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 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,
}), {getContactData : publicApi.getContactData})(Contact);