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.
180 lines
6.4 KiB
180 lines
6.4 KiB
import React from "react"; |
|
import proxy from "~/Redux/proxy"; |
|
import { toast } from "react-toastify"; |
|
import { connect } from "react-redux"; |
|
import { userProduct } from "~/Redux/actions"; |
|
|
|
import { Link, useHistory } from "react-router-dom"; |
|
|
|
import "./index.scss"; |
|
import document_red from "~/assets/icons/document-red.png"; |
|
import ebook_blue from "~/assets/icons/e-book-blue.png"; |
|
import basket_white from "~/assets/icons/basket-white.png"; |
|
|
|
const maxDesktopSize = 1250; |
|
|
|
const fontSize = { |
|
desktop: { |
|
div: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95, |
|
strong: window.innerWidth > maxDesktopSize ? 24 : window.innerWidth / 70, |
|
span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, |
|
button: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80, |
|
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 100, |
|
h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 100, |
|
}, |
|
}; |
|
|
|
function AddToCart(props) { |
|
let history = useHistory(); |
|
const { |
|
price, |
|
off, |
|
supportItems, |
|
page, |
|
|
|
info, |
|
sampleFileId, |
|
productType, |
|
} = props; |
|
function Navigate({ path }) { |
|
history.push(path); |
|
} |
|
let productId = localStorage.getItem("pushToCart"); |
|
if (productId) { |
|
localStorage.removeItem("pushToCart"); |
|
props.pushToCart({ |
|
productId, |
|
userId: props.id, |
|
count: 1, |
|
}); |
|
setTimeout(() => history.push("/cart"), 2000); |
|
} |
|
// if (this.state.path) return Navigate({ path: this.state.path }); |
|
return ( |
|
<> |
|
{window.innerWidth > 1000 ? ( |
|
<section className="product-addtocart d-flex flex-column"> |
|
<div className="product-addtocart__box d-flex flex-column"> |
|
<div className="product-addtocart__box--price d-flex "> |
|
<div |
|
style={{ fontSize: fontSize.desktop.div, width: "100%" }} |
|
className="flex-column" |
|
> |
|
<div |
|
style={{ fontSize: 14, fontWeight: "bold", width: "100%" }} |
|
className="d-flex" |
|
> |
|
{/* {info.product[productType].name} */} |
|
{info.product[0].name} |
|
</div> |
|
<div style={{ float: "left" }}> |
|
<strong style={{ fontSize: fontSize.desktop.strong }}> |
|
{price} |
|
</strong>{" "} |
|
تومان |
|
</div> |
|
</div> |
|
|
|
{off ? ( |
|
<span style={{ fontSize: fontSize.desktop.span }}> |
|
{off} تومان تخفیف |
|
</span> |
|
) : null} |
|
</div> |
|
<Link |
|
to={"/pdf/" + sampleFileId} |
|
// href={file(sampleFileId)} |
|
// target="_blank" |
|
// rel="noopener noreferrer" |
|
style={{ fontSize: fontSize.desktop.button }} |
|
className="product-addtocart__box--sampleButton" |
|
> |
|
مشاهده نمونه کتاب |
|
<img src={document_red} alt="" /> |
|
</Link> |
|
<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 |
|
// )}` |
|
// }`} |
|
style={{ fontSize: fontSize.desktop.button, opacity: 0.3 }} |
|
className="product-addtocart__box--digitalButton" |
|
> |
|
{page === "digital" ? "کتاب چاپی" : window.t("نسخه الکترونیک")} |
|
<img src={ebook_blue} alt="" /> |
|
</Link> |
|
<button |
|
style={{ fontSize: fontSize.desktop.button }} |
|
className="product-addtocart__box--addButton" |
|
onClick={() => { |
|
if (proxy.status()) |
|
props.pushToCart({ |
|
productId: |
|
page === "digital" |
|
? info.product[0].id |
|
: info.product[0].id, |
|
userId: props.id, |
|
count: 1, |
|
}); |
|
else { |
|
toast.info(window.t("جهت ادامه فرآیند خرید وارد حساب خود شوید")); |
|
localStorage.setItem("afterLogin", window.location.pathname); |
|
localStorage.setItem( |
|
"pushToCart", |
|
page === "digital" ? info.product[0].id : info.product[0].id |
|
); |
|
Navigate({ path: "/auth" }); |
|
} |
|
}} |
|
> |
|
افزودن به سبد خرید |
|
<img src={basket_white} alt="" /> |
|
</button> |
|
<div className="product-addtocart__box--accept d-flex"> |
|
<input type="checkbox" checked={true} /> |
|
<Link |
|
to="/page/privacy" |
|
style={{ fontSize: "13px", margin: 0, padding: 0 }} |
|
> |
|
شرایط استفاده از دانوین و حریم خصوصی را مطالعه کرده ام |
|
</Link> |
|
</div> |
|
<div className="product-addtocart__box--accept d-flex"> |
|
<input type="checkbox" checked={true} /> |
|
<Link |
|
to="/page/returning" |
|
style={{ fontSize: "13px", margin: 0, padding: 0 }} |
|
> |
|
شرایط مرجوع کردن کالا در دانوین |
|
</Link> |
|
</div> |
|
</div> |
|
<footer className="product-addtocart__footer d-flex justify-content-between mt-3"> |
|
{supportItems.map((item, i) => ( |
|
<div className="d-flex flex-column align-items-center" key={i}> |
|
<img src={item.icon} alt={item.name} /> |
|
<h2 style={{ fontSize: fontSize.desktop.h2 }}>{item.title}</h2> |
|
</div> |
|
))} |
|
</footer> |
|
</section> |
|
) : null} |
|
</> |
|
); |
|
} |
|
|
|
export default connect( |
|
(state) => ({ |
|
loading: state.userProduct.loading, |
|
info: state.book.info, |
|
id: state.user.status.id, |
|
}), |
|
{ pushToCart: userProduct.add } |
|
)(AddToCart);
|
|
|