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 ? ( <>

سبد خرید

روشهای ارسال

{this.props.payMethods.map((item, i) => ( ))}

جمع کل
سبد خرید

{payPrice} تومان

روشهای ارسال

با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید

{this.props.payMethods.map((item, i) => ( ))}
) : (
) ) : null} {window.innerWidth < 1000 ? ( list ? (

سبد خرید

روشهای ارسال

با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید

{this.props.payMethods.map((item, i) => ( ))}

جمع کل
سبد خرید

{payPrice} تومان

روشهای ارسال

با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید

{this.props.payMethods.map((item, i) => ( ))}
) : (
) ) : null} ); } } 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, }, ], };