|
|
import React, { Component } from "react"; |
|
|
import { toast } from "react-toastify"; |
|
|
import proxy from "~/Redux/proxy"; |
|
|
|
|
|
import { Link } from "react-router-dom"; |
|
|
import { connect } from "react-redux"; |
|
|
import { book } from "~/Redux/actions"; |
|
|
import { userProduct } from "~/Redux/actions"; |
|
|
|
|
|
import Footer from "../Home/Footer/index"; |
|
|
import Navbar from "../Home/Navbar/index"; |
|
|
import Comment from "./Comment/index"; |
|
|
import Breadcrumbs from "./BreadCrumb/index"; |
|
|
import Gallery from "./Gallery/index"; |
|
|
import Info from "./Info/index"; |
|
|
import AddToCart from "./AddToCart/index"; |
|
|
import HomeScroll from "../Home/HomeScroll/index"; |
|
|
import HomeSlider from "../Home/HomeSlider/index"; |
|
|
import Loader from "~/components/Loader/index"; |
|
|
import MaterialModal from "./MaterialModal/index"; |
|
|
|
|
|
import product_shipping from "~/assets/icons/product-shipping.png"; |
|
|
import product_cash_back from "~/assets/icons/product-cash-back.png"; |
|
|
import product_support from "~/assets/icons/product-support.png"; |
|
|
import send_comment from "~/assets/icons/send-comment.png"; |
|
|
|
|
|
import "./index.scss"; |
|
|
|
|
|
const maxDesktopSize = 1250; |
|
|
const maxMobileSize = 550; |
|
|
|
|
|
const fontSize = { |
|
|
desktop: { |
|
|
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70, |
|
|
}, |
|
|
mobile: { |
|
|
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 18, |
|
|
h2: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 24, |
|
|
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 26, |
|
|
a: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 26, |
|
|
p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 30, |
|
|
li: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 29, |
|
|
}, |
|
|
}; |
|
|
class Product extends Component { |
|
|
state = { |
|
|
openComment: false, |
|
|
}; |
|
|
|
|
|
handleOpenComment = () => [ |
|
|
this.setState({ |
|
|
openComment: !this.state.openComment, |
|
|
}), |
|
|
]; |
|
|
|
|
|
componentDidMount() { |
|
|
window.scrollTo(0, 0); |
|
|
this.props.getInfo({ |
|
|
id: window.location.pathname.slice( |
|
|
window.location.pathname.lastIndexOf("/") + 1, |
|
|
window.location.pathname.length |
|
|
), |
|
|
}); |
|
|
this.props.getList(); |
|
|
} |
|
|
|
|
|
render() { |
|
|
const { product, supportItems, info, page } = this.props; |
|
|
return ( |
|
|
<> |
|
|
{window.innerWidth > 1000 ? ( |
|
|
info ? ( |
|
|
<> |
|
|
<div className="product d-flex flex-column"> |
|
|
<Navbar /> |
|
|
<Breadcrumbs |
|
|
page={page} |
|
|
name={ |
|
|
page === "digital" |
|
|
? info.product[0].name |
|
|
: info.product[1].name |
|
|
} |
|
|
/> |
|
|
<header className="product__header d-flex mt-4"> |
|
|
<Gallery gallery={info.files} /> |
|
|
<Info |
|
|
subTitle={info.category} |
|
|
title={ |
|
|
page === "digital" |
|
|
? info.product[0].name |
|
|
: info.product[1].name |
|
|
} |
|
|
description={info.description || "توضیحات محصول خالیست"} |
|
|
/> |
|
|
<AddToCart |
|
|
supportItems={supportItems} |
|
|
price={ |
|
|
page === "digital" |
|
|
? info.product[0].price |
|
|
: info.product[1].price |
|
|
} |
|
|
// off={product.off} |
|
|
page={page} |
|
|
/> |
|
|
</header> |
|
|
<div className="product__comments d-flex flex-column"> |
|
|
<div className="d-flex justify-content-between"> |
|
|
<h3 style={{ fontSize: fontSize.desktop.h1 }}> |
|
|
نظرات خریداران |
|
|
</h3> |
|
|
<button onClick={() => this.handleOpenComment()}> |
|
|
ارسال نظر |
|
|
<img src={send_comment} alt="ارسال نظر" /> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div className="product__comments--list d-flex flex-column"> |
|
|
{info.comment.length > 0 ? ( |
|
|
<Comment comment={info.comment[0]} /> |
|
|
) : null} |
|
|
</div> |
|
|
</div> |
|
|
{0 ? <Identifier item={[]} /> : null} |
|
|
</div> |
|
|
<Footer /> |
|
|
<MaterialModal |
|
|
openComment={this.state.openComment} |
|
|
handleOpenComment={this.handleOpenComment} |
|
|
/> |
|
|
</> |
|
|
) : ( |
|
|
<div |
|
|
className="d-flex justify-content-center align-items-center" |
|
|
style={{ height: "100vh", width: "100vw" }} |
|
|
> |
|
|
<Loader /> |
|
|
</div> |
|
|
) |
|
|
) : null} |
|
|
{window.innerWidth < 1000 ? ( |
|
|
info ? ( |
|
|
<> |
|
|
<div className="mobile-product d-flex flex-column"> |
|
|
<Navbar /> |
|
|
<header className="mobile-product__header d-flex flex-column align-items-center"> |
|
|
<img |
|
|
src={`https://dnvn.ir/api/v1/file/${info.fileIds}`} |
|
|
alt={info.name} |
|
|
/> |
|
|
<h1 style={{ fontSize: fontSize.mobile.h1 }}>{info.name}</h1> |
|
|
<h2 style={{ fontSize: fontSize.mobile.h2 }}> |
|
|
{info.category} |
|
|
</h2> |
|
|
<h3 style={{ fontSize: fontSize.mobile.h1 }}> |
|
|
{page === "digital" |
|
|
? info.product[0].price |
|
|
: info.product[1].price}{" "} |
|
|
تومان |
|
|
</h3> |
|
|
<div className="d-flex flex-column mt-3"> |
|
|
<div className="d-flex"> |
|
|
<Link |
|
|
// to={`/products/${ |
|
|
// page === "digital" |
|
|
// ? `physical/${window.location.pathname.slice( |
|
|
// window.location.pathname.lastIndexOf("/") + 1, |
|
|
// window.location.pathname.length |
|
|
// )}` |
|
|
// : `digital/${window.location.pathname.slice( |
|
|
// window.location.pathname.lastIndexOf("/") + 1, |
|
|
// window.location.pathname.length |
|
|
// )}` |
|
|
// }`} |
|
|
className="mobile-product__header--digitalButton" |
|
|
style={{ fontSize: fontSize.mobile.a, opacity: 0.3 }} |
|
|
> |
|
|
{page === "digital" ? "کتاب فیزیکی" : "نسخه دیجیتال"} |
|
|
</Link> |
|
|
<Link |
|
|
onClick={() => |
|
|
toast.info("برای این کتاب نمونهای درج نشده است.") |
|
|
} |
|
|
className="mobile-product__header--purchase" |
|
|
style={{ fontSize: fontSize.mobile.a }} |
|
|
> |
|
|
مطالعه نمونه کتاب |
|
|
</Link> |
|
|
</div> |
|
|
<button |
|
|
onClick={() => |
|
|
proxy.status() |
|
|
? this.props.pushToCart({ |
|
|
productId: |
|
|
page === "digital" |
|
|
? info.product[0].id |
|
|
: info.product[1].id, |
|
|
userId: this.props.id, |
|
|
count: 1, |
|
|
}) |
|
|
: toast.info("ابتدا وارد حساب کاربری خود شوید.") |
|
|
} |
|
|
className="mobile-product__header--sampleButton" |
|
|
style={{ fontSize: fontSize.mobile.a }} |
|
|
> |
|
|
افزودن به سبد خرید |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
<div className="mobile-product__abstraction d-flex flex-column"> |
|
|
<h3 style={{ fontSize: fontSize.mobile.h3 }}>خلاصه کتاب</h3> |
|
|
<p style={{ fontSize: fontSize.mobile.p }}> |
|
|
{info.description || "توضیحات محصول خالیست"} |
|
|
</p> |
|
|
</div> |
|
|
<div className="mobile-product__modules d-flex flex-column"> |
|
|
<h3 style={{ fontSize: fontSize.mobile.h3 }}> |
|
|
این کتاب شامل چه مواردی است؟ |
|
|
</h3> |
|
|
<ul> |
|
|
{/* {product.modules.map((item, i) => ( |
|
|
<React.Fragment key={i}> |
|
|
<Item item={item} /> |
|
|
</React.Fragment> |
|
|
))} */} |
|
|
</ul> |
|
|
</div> |
|
|
<div className="mobile-product__tips d-flex flex-column"> |
|
|
<h3 style={{ fontSize: fontSize.mobile.h3 }}> |
|
|
نکاتی که هنگام خرید باید به آن توجه داشته باشید؟ |
|
|
</h3> |
|
|
<ul> |
|
|
{/* {product.tips.map((item, i) => ( |
|
|
<React.Fragment key={i}> |
|
|
<Item item={item} /> |
|
|
</React.Fragment> |
|
|
))} */} |
|
|
</ul> |
|
|
</div> |
|
|
<div className="mobile-product__description d-flex"> |
|
|
<p style={{ fontSize: fontSize.mobile.p }}> |
|
|
{info.description} |
|
|
</p> |
|
|
</div> |
|
|
<div className="mobile-product__comments d-flex flex-column"> |
|
|
<div className="d-flex justify-content-between align-items-center mb-3"> |
|
|
<h3 style={{ fontSize: fontSize.mobile.h3 }}> |
|
|
نظرات خریداران |
|
|
</h3> |
|
|
<button onClick={() => this.handleOpenComment()}> |
|
|
ارسال نظر |
|
|
<img src={send_comment} alt="ارسال نظر" /> |
|
|
</button> |
|
|
</div> |
|
|
<div className="mobile-product__comments--list d-flex"> |
|
|
{info.comment.length > 0 |
|
|
? info.comment.map((item, i) => ( |
|
|
<Comment comment={item} key={i} /> |
|
|
)) |
|
|
: null} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
className="d-flex" |
|
|
style={{ |
|
|
// position: "fixed", |
|
|
// bottom: 1, |
|
|
|
|
|
width: "100%", |
|
|
height: "40px", |
|
|
}} |
|
|
> |
|
|
<Link |
|
|
to={"/cart"} |
|
|
style={{ |
|
|
width: "100%", |
|
|
color: "white", |
|
|
backgroundColor: "#7fc75d", |
|
|
cursor: "pointer", |
|
|
borderRadius: 8, |
|
|
textDecoration: "none", |
|
|
padding: "5px 10px", |
|
|
margin: "5px 10px 1px", |
|
|
textAlign: "center", |
|
|
}} |
|
|
> |
|
|
رفتن به سبد خرید |
|
|
</Link> |
|
|
</div> |
|
|
<MaterialModal |
|
|
openComment={this.state.openComment} |
|
|
handleOpenComment={this.handleOpenComment} |
|
|
/> |
|
|
</> |
|
|
) : ( |
|
|
<div |
|
|
className="d-flex justify-content-center align-items-center" |
|
|
style={{ height: "100vh", width: "100vw" }} |
|
|
> |
|
|
<Loader /> |
|
|
</div> |
|
|
) |
|
|
) : null} |
|
|
</> |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
export default connect( |
|
|
(state) => ({ |
|
|
info: state.book.info, |
|
|
// status: state.user.status, |
|
|
loading: state.book.loading, |
|
|
list: state.book.list, |
|
|
id: state.user.status.id, |
|
|
}), |
|
|
{ getInfo: book.info, getList: book.list, pushToCart: userProduct.add } |
|
|
)(Product); |
|
|
|
|
|
Product.defaultProps = { |
|
|
supportItems: [ |
|
|
{ title: "ارسال سریع", icon: product_shipping }, |
|
|
{ title: "پشتیبانی 24 ساعته ", icon: product_support }, |
|
|
{ title: "ضمانت بازگشت ", icon: product_cash_back }, |
|
|
], |
|
|
}; |
|
|
|
|
|
const Item = (props) => { |
|
|
return <li style={{ fontSize: fontSize.mobile.li }}>+ {props.item}</li>; |
|
|
}; |
|
|
|
|
|
const Identifier = (props) => { |
|
|
return ( |
|
|
<> |
|
|
{window.innerWidth < 1000 ? ( |
|
|
<HomeScroll |
|
|
number={2.5} |
|
|
// height={props.item.height} |
|
|
title={"محصولات مشابه"} |
|
|
data={props.item} |
|
|
designType={"product"} |
|
|
moreText={"ّبیشتر"} |
|
|
/> |
|
|
) : null} |
|
|
{window.innerWidth > 1000 ? ( |
|
|
<HomeSlider |
|
|
designType={"simple"} |
|
|
number={"4"} |
|
|
// height={props.item.height} |
|
|
title={"محصولات مشابه"} |
|
|
data={props.item} |
|
|
/> |
|
|
) : null} |
|
|
</> |
|
|
); |
|
|
};
|
|
|
|