|
|
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.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 { status } = this.props; |
|
|
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> |
|
|
{status ? null : ( |
|
|
<> |
|
|
<Input |
|
|
label={"نام و نام خانوادگی"} |
|
|
name={"name"} |
|
|
parent={this} |
|
|
/> |
|
|
<Input label={"شماره تماس"} name={"cellphone"} parent={this} /> |
|
|
</> |
|
|
)} |
|
|
<Select |
|
|
name="unit" |
|
|
options={ |
|
|
status |
|
|
? ["واحد مورد نظر", "واحد فروش", "واحد محتوایی", "واحد فنی"] |
|
|
: ["واحد مورد نظر", "واحد فروش", "واحد فنی"] |
|
|
} |
|
|
parent={this} |
|
|
/> |
|
|
{this.state.unit === "واحد محتوایی" ? ( |
|
|
<Select |
|
|
name="bookId" |
|
|
options={[ |
|
|
"کتاب", |
|
|
...new Set( |
|
|
this.props.myProductList?.map( |
|
|
(item) => item.product.book.name |
|
|
) || [] |
|
|
), |
|
|
]} |
|
|
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);
|
|
|
|