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.
 
 
 

193 lines
5.4 KiB

import React, { Component } from "react";
import { userProduct, comment, file } from "~/Redux/actions";
import Navbar from "../Home/Navbar/index";
import Input from "../Contact/Input/index";
import Select from "../Contact/Select/index";
import Upload from "./Upload";
import "./index.scss";
import { connect } from "react-redux";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
span: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
},
mobile: {
h1: window.innerWidth > maxMobileSize ? 25 : window.innerWidth / 16,
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 34,
span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 32,
},
};
class Support extends Component {
state = {
name: null,
cellphone: null,
unit: null,
bookId: null,
subject: null,
text: null,
file: null,
fileId: null,
};
componentDidMount() {
if (!this.props.myProductList && this.props.status)
this.props.getUserProductList({});
}
onChange = (name, value, type) => {
if (type === "file") {
this.props.upload({ file: value, target: name });
}
this.setState({
[name]: value,
});
};
async send() {
const {
submit,
status: { userId },
} = this.props;
const { text, fileId, name, cellphone, unit, bookId, subject } = this.state;
await submit({
fileId,
text,
name,
cellphone,
unit,
bookId,
subject,
userId,
});
//todo redirectHome
}
render() {
const grades = [
window.t("پیش دبستان"),
window.t("اول"),
window.t("دوم"),
window.t("سوم"),
window.t("چهارم"),
window.t("پنجم"),
window.t("ششم"),
window.t("هفتم"),
window.t("هشتم"),
window.t("نهم"),
window.t("دهم"),
window.t("یازدهم"),
window.t("دوازدهم"),
];
let { status } = this.props;
let opt = [
window.t("واحد مورد نظر"),
window.t("واحد فروش"),
window.t("واحد فنی"),
window.t("واحد محتوایی"),
];
opt = opt.map((e) => [e, e]);
return (
<>
<div className="mobile-support d-flex flex-column align-items-center">
<Navbar page={"support"} />
<div
className={
"mobile-support__form d-flex flex-column " +
(window.lang === "en" ? "ltr" : "")
}
>
<h1 style={{ fontSize: fontSize.mobile.h1 }}>
{window.t("پشتیبانی")}
</h1>
<p>
{window.t(
"برای ارتباط با دنیای شگفت انگیز دانوین از فرم زیر استفاده کنید و پس از انتخاب دپارتمان مد نظر پیام خود را ارسال کنید."
)}{" "}
</p>
{status ? null : (
<>
<Input
label={window.t("نام و نام خانوادگی")}
name={"name"}
parent={this}
/>
<Input
label={window.t("شماره تماس")}
name={"cellphone"}
parent={this}
/>
</>
)}
<Select
required
name="unit"
options={
status && this.props.myProductList?.length
? opt
: opt.slice(0, 3)
}
parent={this}
/>
{this.state.unit === window.t("واحد محتوایی") ? (
<Select
required
name="bookId"
options={[
...new Set(
this.props.myProductList?.map((item) => [
item.product.book.id,
`${item.product.book.name} ${window.t("پایه")} ${
grades[item.product.book.gradeId]
}`,
]) || []
),
]}
parent={this}
/>
) : null}
<Input
label={window.t("موضوع")}
name={"subject"}
parent={this}
required
/>
<Input
label={window.t("متن")}
name={"text"}
parent={this}
multiline
required
/>
{/* <textarea placeholder="متن " name="text" rows="8" o></textarea> */}
<Upload
type="file"
onChange={(e) => this.addFile(e)}
parent={this}
name="file"
/>
<button onClick={() => this.send()}>{window.t("ارسال")}</button>
</div>
</div>
</>
);
}
}
export default connect(
(state) => ({
myProductList: state.userProduct.myList,
status: state.user.status,
uploadFileId: state.file.supportFileId,
lang: state.publicApi.lang,
}),
{
getUserProductList: userProduct.myList,
submit: comment.add,
upload: file.upload,
}
)(Support);