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.
407 lines
15 KiB
407 lines
15 KiB
import React, { Component } from "react"; |
|
import { connect } from "react-redux"; |
|
import { transport, userFactor } from "~/Redux/actions"; |
|
|
|
import Navbar from "../Home/Navbar/index"; |
|
import Footer from "../Home/Footer/index"; |
|
import Table from "./Table/index"; |
|
import DiscoutCode from "./Discount/index"; |
|
import DeliveryMethod from "./DeliveryMethod/index"; |
|
import Factor from "./Factor/index"; |
|
import Loader from "~/components/Loader/index"; |
|
import { Link, useHistory } from "react-router-dom"; |
|
import "./index.scss"; |
|
function Navigate({ path }) { |
|
let history = useHistory(); |
|
return <>{history.push(path)}</>; |
|
} |
|
|
|
const maxDesktopSize = 1250; |
|
const maxMobileSize = 550; |
|
|
|
const fontSize = { |
|
desktop: { |
|
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, |
|
th: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80, |
|
h2: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 55, |
|
h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, |
|
strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, |
|
span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95, |
|
p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 90, |
|
}, |
|
mobile: { |
|
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13, |
|
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, |
|
h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, |
|
strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, |
|
span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34, |
|
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, |
|
input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, |
|
}, |
|
}; |
|
class Cart extends Component { |
|
state = { |
|
selectedDelivery: { name: "", price: 0 }, |
|
discount: 0, |
|
totalPrice: null, |
|
list: this.props.list, |
|
controlFactorInfoRepeat: true, |
|
}; |
|
|
|
componentDidUpdate(prevProps, prevState) { |
|
if (window.location.search) |
|
if (!window.location.search.includes("NOK") && !window.location.hash) { |
|
let Authority = window.location.search |
|
.slice(1) |
|
.split("&")[0] |
|
.split("=")[1]; |
|
this.props.getVerify({ Authority }); |
|
window.location.hash = "verified"; |
|
} |
|
|
|
// if (this.props.factorInfo === null && !this.controlFactorInfoRepeat) { |
|
// this.props.getFactorInfo({}); |
|
// this.controlFactorInfoRepeat = true; |
|
// } |
|
// if (this.props.list.length > 0) { |
|
// let wantedId; //should be zero |
|
// for (let item of this.props.list) { |
|
// if (item.condition === 2) { |
|
// wantedId = item.id; |
|
// break; |
|
// } |
|
// } |
|
// if (this.props.list.length !== 1) { |
|
// // this.props.getInfo({ id: wantedId }); |
|
// } |
|
// } else { |
|
// // this.props.getFactorInfo({}); |
|
// } |
|
} |
|
|
|
componentDidMount() { |
|
localStorage.removeItem("afterLogin"); |
|
|
|
window.scrollTo(0, 0); |
|
this.props.getTransportList(); |
|
this.props.getFactorInfo({}); |
|
} |
|
|
|
handleCounter = (type, id) => { |
|
if (type === "increase") { |
|
this.setState((prevState) => ({ |
|
list: prevState.list.map((item) => |
|
item.id === id ? { ...item, number: item.number + 1 } : item |
|
), |
|
})); |
|
} else { |
|
this.setState((prevState) => ({ |
|
list: prevState.list.map((item) => |
|
item.id === id ? { ...item, number: item.number - 1 } : item |
|
), |
|
})); |
|
} |
|
}; |
|
|
|
handleDelete = (id) => { |
|
let list = this.state.list.filter((item) => item.id !== id); |
|
this.setState({ |
|
list: list, |
|
}); |
|
}; |
|
|
|
totalPrice = () => { |
|
let total = 0; |
|
for (let i = 0; i < this.state.list.length; i++) { |
|
total += this.state.list[i].price * this.state.list[i].number; |
|
} |
|
return total - this.state.discount + this.state.selectedDelivery.price; |
|
}; |
|
|
|
render() { |
|
const { list, payPrice, payMethods, factorInfo } = this.props; |
|
if (!factorInfo || list.length === 0) |
|
return ( |
|
<div |
|
align="center" |
|
className={window.innerWidth < 1000 ? "mobile-cart" : "cart "} |
|
> |
|
<Navbar /> |
|
<div align="center" style={{ marginTop: 50 }}> |
|
{window.t("هیچ محصولی در سبد خرید شما وجود ندارد")}{" "} |
|
</div> |
|
<br /> |
|
<Link |
|
to="/products" |
|
style={{ |
|
textDecoration: "none", |
|
width: "80%", |
|
textAlign: "center", |
|
backgroundColor: "green", |
|
color: "white", |
|
borderRadius: "10px", |
|
padding: "5px 10px", |
|
margin: "10 auto", |
|
}} |
|
> |
|
{window.t("فروشگاه")}{" "} |
|
</Link> |
|
</div> |
|
); |
|
return ( |
|
<> |
|
{window.innerWidth > 1000 ? ( |
|
list.length > 0 ? ( |
|
<> |
|
<div className="cart d-flex flex-column"> |
|
<Navbar /> |
|
{window.location.search.includes("NOK") || |
|
this.props.isVerified === false ? ( |
|
<div> |
|
{window.t( |
|
"پرداخت شما با خطا مواجه شد ، لطفا مجدد تلاش نمایید" |
|
)}{" "} |
|
</div> |
|
) : window.location.search.includes("OK") ? ( |
|
<Navigate path="/orders" /> |
|
) : null} |
|
<div |
|
className="d-flex" |
|
style={{ width: "100%", flex: 1, marginBottom: 10 }} |
|
> |
|
<section className="cart__right d-flex flex-column"> |
|
<header> |
|
<h1 style={{ fontSize: fontSize.desktop.h1 }}> |
|
{window.t("سبد پیش خرید")}{" "} |
|
</h1> |
|
</header> |
|
<Table |
|
list={list} |
|
handleCounter={this.handleCounter} |
|
handleDelete={this.handleDelete} |
|
payPrice={payPrice} |
|
route={"cart"} |
|
/> |
|
</section> |
|
<section className="cart__left d-flex flex-column p-3"> |
|
{false && factorInfo.transportId ? ( |
|
<header className="cart__left--header d-flex flex-column"> |
|
<h2 style={{ fontSize: fontSize.desktop.h2 }}> |
|
{window.t("روشهای ارسال")} |
|
</h2> |
|
<div className="d-flex justify-content-between"> |
|
{payMethods.map((item, i) => ( |
|
<DeliveryMethod |
|
data={item} |
|
key={i} |
|
parent={this} |
|
transportId={ |
|
factorInfo ? factorInfo.transportId : null |
|
} |
|
/> |
|
))} |
|
</div> |
|
</header> |
|
) : null} |
|
{factorInfo ? <DiscoutCode /> : null} |
|
{factorInfo ? <Factor parent={this} list={list} /> : null} |
|
{factorInfo ? ( |
|
<div className="cart__totalPrice d-flex align-items-center justify-content-center"> |
|
<h3 style={{ fontSize: fontSize.mobile.h2 }}> |
|
{window.t("جمع کل")} |
|
<br /> |
|
{window.t("سبد خرید")}{" "} |
|
</h3> |
|
<div className="d-flex align-items-center"> |
|
<strong style={{ fontSize: fontSize.mobile.h1 }}> |
|
{factorInfo.payPrice - factorInfo.transportPrice} |
|
</strong> |
|
<span style={{ fontSize: fontSize.mobile.h3 }}> |
|
{window.t("تومان")} |
|
</span> |
|
</div> |
|
</div> |
|
) : null} |
|
|
|
{/* <div className="cart__left--header d-flex flex-column mt-3"> |
|
<h2 style={{ fontSize: fontSize.desktop.h2 }}> |
|
{window.t("روشهای ارسال")} |
|
</h2> |
|
<p style={{ fontSize: fontSize.desktop.p }}> |
|
{window.t("با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید")} </p> |
|
<div className="d-flex justify-content-between"> |
|
{payMethods.map((item, i) => ( |
|
<DeliveryMethod data={item} key={i} parent={this} /> |
|
))} |
|
</div> |
|
</div> */} |
|
|
|
<Link |
|
to="/checkout" |
|
className="cart__left--submit" |
|
style={{ textDecoration: "none", textAlign: "center" }} |
|
//onClick={() => this.props.payFactor({ userId: userId })} |
|
> |
|
{window.t("ادامه")}{" "} |
|
</Link> |
|
</section> |
|
</div> |
|
</div> |
|
<Footer /> |
|
</> |
|
) : ( |
|
<div |
|
className="d-flex justify-content-center align-items-center" |
|
style={{ height: "100vh", width: "100vw" }} |
|
> |
|
<Loader /> |
|
</div> |
|
) |
|
) : null} |
|
{window.innerWidth < 1000 ? ( |
|
list.length > 0 ? ( |
|
<div className="mobile-cart d-flex flex-column"> |
|
<Navbar /> |
|
{window.location.search.includes("NOK") ? ( |
|
<div> |
|
{window.t( |
|
"پرداخت شما با خطا مواجه شد ، لطفا مجدد تلاش نمایید" |
|
)} |
|
</div> |
|
) : null} |
|
<h1 style={{ fontSize: fontSize.mobile.h1 }}> |
|
{window.t("سبد پیش خرید")} |
|
</h1> |
|
<div className="d-flex"> |
|
<Table |
|
list={list} |
|
handleCounter={this.handleCounter} |
|
handleDelete={this.handleDelete} |
|
payPrice={payPrice} |
|
route={"cart"} |
|
/> |
|
</div> |
|
{false && factorInfo.transportId ? ( |
|
<div className="mobile-cart__payMethods d-flex flex-column"> |
|
<h2 style={{ fontSize: fontSize.mobile.h2 }}> |
|
{window.t("روشهای ارسال")} |
|
</h2> |
|
<p style={{ fontSize: fontSize.mobile.p }}> |
|
{window.t( |
|
"با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید" |
|
)}{" "} |
|
</p> |
|
|
|
<div className="d-flex justify-content-between"> |
|
{this.props.payMethods.map((item, i) => ( |
|
<DeliveryMethod |
|
data={item} |
|
key={i} |
|
parent={this} |
|
transportId={factorInfo ? factorInfo.transportId : null} |
|
/> |
|
))} |
|
</div> |
|
</div> |
|
) : null} |
|
<DiscoutCode parent={this} /> |
|
{factorInfo ? <Factor parent={this} list={list} /> : null} |
|
|
|
<div className="mobile-cart__totalPrice d-flex align-items-center justify-content-center mt-2"> |
|
<h3 style={{ fontSize: fontSize.mobile.h2 }}> |
|
{window.t("جمع کل")} <br /> |
|
{window.t("سبد خرید")}{" "} |
|
</h3> |
|
{factorInfo ? ( |
|
<div className="d-flex align-items-center"> |
|
<strong style={{ fontSize: fontSize.mobile.h1 }}> |
|
{factorInfo.payPrice - factorInfo.transportPrice} |
|
{/* // factorInfo.transportPrice - // factorInfo.offPrice} */} |
|
</strong> |
|
<span style={{ fontSize: fontSize.mobile.h3 }}> |
|
{window.t("تومان")} |
|
</span> |
|
</div> |
|
) : null} |
|
</div> |
|
{/* <div className="mobile-cart__payMethods d-flex flex-column"> |
|
<h2 style={{ fontSize: fontSize.mobile.h2 }}>{window.t("روشهای ارسال")}</h2> |
|
<p style={{ fontSize: fontSize.mobile.p }}> |
|
با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید")} </p> |
|
|
|
<div className="d-flex justify-content-between"> |
|
{this.props.payMethods.map((item, i) => ( |
|
<DeliveryMethod data={item} key={i} parent={this} /> |
|
))} |
|
</div> |
|
</div> */} |
|
{/* <button |
|
className="mobile-cart__submit" |
|
onClick={() => this.props.payFactor({ userId: userId })} |
|
> |
|
پرداخت")} |
|
</button> */} |
|
|
|
<br /> |
|
<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> |
|
<Link |
|
to="/checkout" |
|
className="mobile-cart__submit" |
|
style={{ textAlign: "center", textDecoration: "none" }} |
|
// onClick={() => this.props.payFactor({ userId: userId })} |
|
> |
|
ادامه")}{" "} |
|
</Link> |
|
</div> |
|
) : ( |
|
<div |
|
className="d-flex justify-content-center align-items-center" |
|
style={{ height: "100vh", width: "100vw" }} |
|
> |
|
<Loader /> |
|
</div> |
|
) |
|
) : null} |
|
</> |
|
); |
|
} |
|
} |
|
|
|
export default connect( |
|
(state) => ({ |
|
list: |
|
state.userFactor.info?.products?.filter((item) => +item.condition < 2) || |
|
[], |
|
payPrice: state.userProduct.sum, |
|
payMethods: state.transport.list, |
|
factorInfo: state.userFactor.info, |
|
userId: state.user.status.id, |
|
|
|
isVerified: state.userFactor.isVerified, |
|
}), |
|
{ |
|
// getList: userProduct.list, |
|
// getInfo: userProduct.info, |
|
getTransportList: transport.list, |
|
getFactorInfo: userFactor.info, |
|
payFactor: userFactor.payment, |
|
getVerify: userFactor.verify, |
|
} |
|
)(Cart);
|
|
|