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

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