|
|
|
|
@ -4,6 +4,7 @@ import { ToastContainer } from "react-toastify"; |
|
|
|
|
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"; |
|
|
|
|
@ -51,8 +52,7 @@ class Product extends Component { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
|
const { product, sameProducts, supportItems, info, page, loading, list } = |
|
|
|
|
this.props; |
|
|
|
|
const { product, supportItems, info, page } = this.props; |
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
{window.innerWidth > 1000 ? ( |
|
|
|
|
@ -125,38 +125,56 @@ class Product extends Component { |
|
|
|
|
/> |
|
|
|
|
<h1 style={{ fontSize: fontSize.mobile.h1 }}>{info.name}</h1> |
|
|
|
|
<h2 style={{ fontSize: fontSize.mobile.h2 }}> |
|
|
|
|
{product.subTitle} |
|
|
|
|
{info.category} |
|
|
|
|
</h2> |
|
|
|
|
<div className="d-flex flex-column mt-3"> |
|
|
|
|
<div className="d-flex"> |
|
|
|
|
<Link |
|
|
|
|
to={`/cart`} |
|
|
|
|
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 }} |
|
|
|
|
> |
|
|
|
|
خرید نسخه دیجیتال |
|
|
|
|
{page === "digital" ? "کتاب فیزیکی" : "نسخه دیجیتال"} |
|
|
|
|
</Link> |
|
|
|
|
<Link |
|
|
|
|
to={`/cart`} |
|
|
|
|
className="mobile-product__header--purchase" |
|
|
|
|
style={{ fontSize: fontSize.mobile.a }} |
|
|
|
|
> |
|
|
|
|
خرید نسخه چاپی |
|
|
|
|
مطالعه نمونه کتاب |
|
|
|
|
</Link> |
|
|
|
|
</div> |
|
|
|
|
<Link |
|
|
|
|
to={`/products/${product.id}/sample`} |
|
|
|
|
<button |
|
|
|
|
onClick={() => |
|
|
|
|
this.props.pushToCart({ |
|
|
|
|
productId: |
|
|
|
|
page === "digital" |
|
|
|
|
? info.product[0].id |
|
|
|
|
: info.product[1].id, |
|
|
|
|
userId: this.props.id, |
|
|
|
|
count: 1, |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
className="mobile-product__header--sampleButton" |
|
|
|
|
style={{ fontSize: fontSize.mobile.a }} |
|
|
|
|
> |
|
|
|
|
مطالعه نمونه کتاب |
|
|
|
|
</Link> |
|
|
|
|
افزودن به سبد خرید |
|
|
|
|
</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 }}> |
|
|
|
|
{product.abstraction} |
|
|
|
|
{info.description || "توضیحات محصول خالیست"} |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
<div className="mobile-product__modules d-flex flex-column"> |
|
|
|
|
@ -164,11 +182,11 @@ class Product extends Component { |
|
|
|
|
این کتاب شامل چه مواردی است؟ |
|
|
|
|
</h3> |
|
|
|
|
<ul> |
|
|
|
|
{product.modules.map((item, i) => ( |
|
|
|
|
{/* {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"> |
|
|
|
|
@ -176,16 +194,16 @@ class Product extends Component { |
|
|
|
|
نکاتی که هنگام خرید باید به آن توجه داشته باشید؟ |
|
|
|
|
</h3> |
|
|
|
|
<ul> |
|
|
|
|
{product.tips.map((item, i) => ( |
|
|
|
|
{/* {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 }}> |
|
|
|
|
{product.description} |
|
|
|
|
{info.description} |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
<div className="mobile-product__comments d-flex flex-column"> |
|
|
|
|
@ -193,9 +211,11 @@ class Product extends Component { |
|
|
|
|
نظرات خریداران |
|
|
|
|
</h3> |
|
|
|
|
<div className="mobile-product__comments--list d-flex"> |
|
|
|
|
{product.comments.map((item, i) => ( |
|
|
|
|
{info.comment.length > 0 |
|
|
|
|
? info.comment.map((item, i) => ( |
|
|
|
|
<Comment comment={item} key={i} /> |
|
|
|
|
))} |
|
|
|
|
)) |
|
|
|
|
: null} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -231,8 +251,9 @@ export default connect( |
|
|
|
|
// status: state.user.status,
|
|
|
|
|
loading: state.book.loading, |
|
|
|
|
list: state.book.list, |
|
|
|
|
id: state.user.status.id, |
|
|
|
|
}), |
|
|
|
|
{ getInfo: book.info, getList: book.list } |
|
|
|
|
{ getInfo: book.info, getList: book.list, pushToCart: userProduct.add } |
|
|
|
|
)(Product); |
|
|
|
|
|
|
|
|
|
Product.defaultProps = { |
|
|
|
|
|
