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