|
|
import React, { Component } from "react"; |
|
|
import { connect } from "react-redux"; |
|
|
import { userProduct } from "~/Redux/actions"; |
|
|
import { ToastContainer } from "react-toastify"; |
|
|
|
|
|
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 sciense_6 from "../../assets/images/sciense-6.png"; |
|
|
|
|
|
import "./index.scss"; |
|
|
|
|
|
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 ? 20 : 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: [ |
|
|
{ |
|
|
id: 0, |
|
|
title: " گسسته ", |
|
|
subTitle: " گیرد", |
|
|
options: "بپشتی", |
|
|
image: sciense_6, |
|
|
slicePrice: 200000, |
|
|
number: 1, |
|
|
price: 1899900, |
|
|
}, |
|
|
{ |
|
|
id: 1, |
|
|
title: "ریاضیات گسسته خیلی پیشرفته", |
|
|
subTitle: "در این قسمت توضیح بسیار کوتاهی قرار می گیرد", |
|
|
options: "بستههای الحاقی: کیف، کفش و کوله پشتی", |
|
|
image: sciense_6, |
|
|
slicePrice: 300000, |
|
|
number: 1, |
|
|
price: 2500000, |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
title: "ریاضیات گسسته خیلی پیشرفته", |
|
|
subTitle: "در این قسمت توضیح بسیار کوتاهی قرار می گیرد", |
|
|
options: "بستههای الحاقی: کیف، کفش و کوله پشتی", |
|
|
image: sciense_6, |
|
|
slicePrice: 150000, |
|
|
number: 1, |
|
|
price: 1000000, |
|
|
}, |
|
|
], |
|
|
}; |
|
|
|
|
|
componentDidMount() { |
|
|
this.props.getList(); |
|
|
} |
|
|
|
|
|
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 } = this.props; |
|
|
return ( |
|
|
<> |
|
|
{window.innerWidth > 1000 ? ( |
|
|
list ? ( |
|
|
<> |
|
|
<div className="cart d-flex flex-column"> |
|
|
<Navbar /> |
|
|
<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 }}> |
|
|
سبد خرید |
|
|
</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"> |
|
|
<header className="cart__left--header d-flex flex-column"> |
|
|
<h2 style={{ fontSize: fontSize.desktop.h2 }}> |
|
|
روشهای ارسال |
|
|
</h2> |
|
|
<div className="d-flex justify-content-between"> |
|
|
{this.props.payMethods.map((item, i) => ( |
|
|
<DeliveryMethod data={item} key={i} parent={this} /> |
|
|
))} |
|
|
</div> |
|
|
</header> |
|
|
<DiscoutCode /> |
|
|
<Factor parent={this} /> |
|
|
<div className="cart__totalPrice d-flex align-items-center justify-content-center"> |
|
|
<h3 style={{ fontSize: fontSize.mobile.h2 }}> |
|
|
جمع کل |
|
|
<br /> |
|
|
سبد خرید |
|
|
</h3> |
|
|
<div className="d-flex align-items-center"> |
|
|
<strong style={{ fontSize: fontSize.mobile.h1 }}> |
|
|
{payPrice} |
|
|
</strong> |
|
|
<span style={{ fontSize: fontSize.mobile.h3 }}> |
|
|
تومان |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
<div className="cart__left--header d-flex flex-column mt-3"> |
|
|
<h2 style={{ fontSize: fontSize.desktop.h2 }}> |
|
|
روشهای ارسال |
|
|
</h2> |
|
|
<p style={{ fontSize: fontSize.desktop.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="cart__left--submit">پرداخت</button> |
|
|
</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 ? ( |
|
|
<div className="mobile-cart d-flex flex-column"> |
|
|
<Navbar /> |
|
|
<h1 style={{ fontSize: fontSize.mobile.h1 }}>سبد خرید</h1> |
|
|
<div className="d-flex"> |
|
|
<Table |
|
|
list={list} |
|
|
handleCounter={this.handleCounter} |
|
|
handleDelete={this.handleDelete} |
|
|
payPrice={payPrice} |
|
|
route={"cart"} |
|
|
/> |
|
|
</div> |
|
|
<div className="mobile-cart__payMethods d-flex flex-column"> |
|
|
<h2 style={{ fontSize: fontSize.mobile.h2 }}>روشهای ارسال</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> |
|
|
<DiscoutCode parent={this} /> |
|
|
<Factor parent={this} /> |
|
|
<div className="mobile-cart__totalPrice d-flex align-items-center justify-content-center"> |
|
|
<h3 style={{ fontSize: fontSize.mobile.h2 }}> |
|
|
جمع کل |
|
|
<br /> |
|
|
سبد خرید |
|
|
</h3> |
|
|
<div className="d-flex align-items-center"> |
|
|
<strong style={{ fontSize: fontSize.mobile.h1 }}> |
|
|
{payPrice} |
|
|
</strong> |
|
|
<span style={{ fontSize: fontSize.mobile.h3 }}>تومان</span> |
|
|
</div> |
|
|
</div> |
|
|
<div className="mobile-cart__payMethods d-flex flex-column"> |
|
|
<h2 style={{ fontSize: fontSize.mobile.h2 }}>روشهای ارسال</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">پرداخت</button> |
|
|
</div> |
|
|
) : ( |
|
|
<div |
|
|
className="d-flex justify-content-center align-items-center" |
|
|
style={{ height: "100vh", width: "100vw" }} |
|
|
> |
|
|
<Loader /> |
|
|
</div> |
|
|
) |
|
|
) : null} |
|
|
<ToastContainer |
|
|
position="bottom-right" |
|
|
autoClose={1500} |
|
|
hideProgressBar={true} |
|
|
newestOnTop={true} |
|
|
closeOnClick |
|
|
rtl={true} |
|
|
pauseOnFocusLoss |
|
|
draggable |
|
|
pauseOnHover |
|
|
/> |
|
|
</> |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
export default connect( |
|
|
(state) => ({ |
|
|
list: state.userProduct.list, |
|
|
payPrice: state.userProduct.sum, |
|
|
}), |
|
|
{ getList: userProduct.list } |
|
|
)(Cart); |
|
|
|
|
|
Cart.defaultProps = { |
|
|
payMethods: [ |
|
|
{ |
|
|
name: "ارسال با پست پیشتاز", |
|
|
price: 36.891, |
|
|
}, |
|
|
{ |
|
|
name: "ارسال با پیک موتوری", |
|
|
price: 36.891, |
|
|
}, |
|
|
], |
|
|
};
|
|
|
|