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