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.
 
 
 

356 lines
13 KiB

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