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.
 
 
 

160 lines
4.6 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 grades = [
"پیش دبستان",
"اول",
"دوم",
"سوم",
"چهارم",
"پنجم",
"ششم",
"هفتم",
"هشتم",
"نهم",
"دهم",
"یازدهم",
"دوازدهم",
];
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.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() {
let { myProductList, status } = this.props;
console.log({ myProductList });
return (
<>
<div className="mobile-support d-flex flex-column align-items-center">
<Navbar page={"support"} />
<div className="mobile-support__form d-flex flex-column">
<h1 style={{ fontSize: fontSize.mobile.h1 }}>پشتیبانی</h1>
<p>
برای ارتباط با دنیای شگفت انگیز دانوین از فرم زیر استفاده کنید و
پس از انتخاب دپارتمان مد نظر پیام خود را ارسال کنید.
</p>
{status ? null : (
<>
<Input
label={"نام و نام خانوادگی"}
name={"name"}
parent={this}
/>
<Input label={"شماره تماس"} name={"cellphone"} parent={this} />
</>
)}
<Select
name="unit"
options={
status && this.props.myProductList.length
? ["واحد مورد نظر", "واحد فروش", "واحد محتوایی", "واحد فنی"]
: ["واحد مورد نظر", "واحد فروش", "واحد فنی"]
}
parent={this}
/>
{this.state.unit === "واحد محتوایی" ? (
<Select
name="bookId"
options={[
"انتخاب کتاب",
...new Set(
this.props.myProductList?.map(
(item) =>
`${item.product.book.name} پایه ${
grades[item.product.book.gradeId]
}`
) || []
),
]}
parent={this}
/>
) : null}
<Input label={"موضوع "} name={"subject"} parent={this} />
<Input label={"متن"} name={"text"} parent={this} multiline />
{/* <textarea placeholder="متن " name="text" rows="8" o></textarea> */}
<Upload
type="file"
onChange={(e) => this.addFile(e)}
parent={this}
name="file"
/>
<button onClick={() => this.send()}>ارسال</button>
</div>
</div>
</>
);
}
}
export default connect(
(state) => ({
myProductList: state.userProduct.myList,
status: state.user.status,
uploadFileId: state.file.supportFileId,
}),
{
getUserProductList: userProduct.myList,
submit: comment.add,
upload: file.upload,
}
)(Support);