|
|
import React, { useState, useEffect } from "react"; |
|
|
import { |
|
|
userProduct, |
|
|
userFactor, |
|
|
publicApi, |
|
|
dialog, |
|
|
} from "../../redux/actions"; |
|
|
import { useNavigate } from "react-router-dom"; |
|
|
import separate from "../../utils/separate"; |
|
|
import { toast } from "react-toastify"; |
|
|
import DeliveryForm from "../DeliveryForm"; |
|
|
import Product from "./Product"; |
|
|
import Address from "../Address"; |
|
|
import Code from "./Code"; |
|
|
import Button from "../../components/Button"; |
|
|
import Empty from "../../components/Empty"; |
|
|
|
|
|
//assets |
|
|
import dropdownIcon from "../../assets/icons/white-dropdown.svg"; |
|
|
import alertIcon from "../../assets/icons/alert.svg"; |
|
|
|
|
|
import { connect } from "react-redux"; |
|
|
|
|
|
function ShoppingCart({ |
|
|
isDark, |
|
|
isMobile, |
|
|
list, |
|
|
factorInfo, |
|
|
user, |
|
|
getList, |
|
|
getFactorInfo, |
|
|
headerOptions, |
|
|
setHeaderOptions, |
|
|
desktopContentTransform, |
|
|
userProducts, |
|
|
payFactor, |
|
|
loading, |
|
|
setDialog, |
|
|
isLogin, |
|
|
}) { |
|
|
const [phase, setPhase] = useState("products"); |
|
|
const navigation = useNavigate(); |
|
|
useEffect(() => { |
|
|
console.log("gl1") |
|
|
if (isLogin) getList(); |
|
|
getFactorInfo({ userId: user?.id }); |
|
|
setHeaderOptions(headerOptions); |
|
|
}, []); |
|
|
|
|
|
useEffect(() => { |
|
|
if (phase === "products") { |
|
|
setHeaderOptions(headerOptions); |
|
|
} |
|
|
}, [phase]); |
|
|
|
|
|
const productsLength = userProducts?.filter( |
|
|
(product) => product.condition < 2 |
|
|
)?.length; |
|
|
|
|
|
const next = { |
|
|
products: () => |
|
|
productsLength |
|
|
? userProducts.filter((object) => object.productType === 2).length > 0 |
|
|
? setPhase("deliveryForm") |
|
|
: setDialog({ |
|
|
type: "confirm", |
|
|
text: "به درگاه پرداخت بریم؟", |
|
|
open: true, |
|
|
accept: () => payFactor({ userId: user.id }), |
|
|
}) |
|
|
: toast.info("ابتدا یک محصول را به سبد خرید خود اضافه کنید."), |
|
|
deliveryForm: () => |
|
|
setDialog({ |
|
|
type: "confirm", |
|
|
text: "به درگاه پرداخت بریم؟", |
|
|
open: true, |
|
|
accept: () => payFactor({ userId: user.id }), |
|
|
}), |
|
|
profile: () => { |
|
|
console.log("Set profile"); |
|
|
console.log("Go to shaparak"); |
|
|
}, |
|
|
}; |
|
|
|
|
|
const Table = () => { |
|
|
return ( |
|
|
<div className="w-full flex flex-col"> |
|
|
<header className="w-full flex flex-row gap-10"> |
|
|
<strong className="w-3/4 pb-2 border-b border-solid border-gray-200 text-gray70 text-sm font-normal"> |
|
|
کالاهای انتخابی |
|
|
</strong> |
|
|
<strong className="w-1/4 pb-2 border-b border-solid border-gray-200 text-gray70 text-sm font-normal"> |
|
|
تعداد سفارش |
|
|
</strong> |
|
|
</header> |
|
|
<ul className="w-full mt-2 list-none p-0"> |
|
|
{list |
|
|
.sort((a, b) => a?.id - b?.id) |
|
|
.map( |
|
|
(product, index) => |
|
|
product.condition < 2 && ( |
|
|
<Product loading={loading} key={index} product={product} /> |
|
|
) |
|
|
)} |
|
|
</ul> |
|
|
<div className="w-full flex justify-end"> |
|
|
<Code /> |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
}; |
|
|
|
|
|
const PriceStatus = ({ name, value, type }) => { |
|
|
return isMobile ? ( |
|
|
<div className="w-full flex flex-row justify-between py-3"> |
|
|
<strong className="font-semibold text-tiny dark:text-white text-blue5F"> |
|
|
{name} |
|
|
</strong> |
|
|
<span |
|
|
className="font-medium text-lg dark:text-white" |
|
|
style={{ |
|
|
color: !isDark |
|
|
? type === "error" |
|
|
? "#F1420D" |
|
|
: "rgb(6, 186, 206)" |
|
|
: "", |
|
|
}} |
|
|
> |
|
|
{separate(Math.floor(value))} |
|
|
<span |
|
|
style={{ |
|
|
color: !isDark ? (type === "error" ? "#F1420D" : "") : "", |
|
|
}} |
|
|
className="text-sm mr-2" |
|
|
> |
|
|
تومان |
|
|
</span> |
|
|
</span> |
|
|
</div> |
|
|
) : ( |
|
|
<div className="w-full flex flex-row justify-between py-4"> |
|
|
<strong className="font-semibold text-tiny dark:text-white text-blue5F"> |
|
|
{name} |
|
|
</strong> |
|
|
<span |
|
|
className="font-medium text-lg dark:text-white" |
|
|
style={{ |
|
|
color: !isDark |
|
|
? type === "error" |
|
|
? "#F1420D" |
|
|
: "rgb(6, 186, 206)" |
|
|
: "", |
|
|
}} |
|
|
> |
|
|
{separate(Math.floor(value))} |
|
|
<span |
|
|
style={{ |
|
|
color: !isDark ? (type === "error" ? "#F1420D" : "") : "", |
|
|
}} |
|
|
className="text-sm mr-2" |
|
|
> |
|
|
تومان |
|
|
</span> |
|
|
</span> |
|
|
</div> |
|
|
); |
|
|
}; |
|
|
|
|
|
const layouts = { |
|
|
products: isMobile ? ( |
|
|
<> |
|
|
{list |
|
|
.sort((a, b) => a?.id - b?.id) |
|
|
.map( |
|
|
(product, index) => |
|
|
product.condition < 2 && ( |
|
|
<Product loading={loading} key={index} product={product} /> |
|
|
) |
|
|
)} |
|
|
<Code /> |
|
|
</> |
|
|
) : productsLength ? ( |
|
|
<Table /> |
|
|
) : ( |
|
|
<Empty |
|
|
text="سبد خرید شما خالی است." |
|
|
buttonText="فروشگاه" |
|
|
buttonAction={() => navigation("/products")} |
|
|
/> |
|
|
// <strong className="text-blueC0">سبد خرید شما خالی است.</strong> |
|
|
), |
|
|
deliveryForm: <DeliveryForm setPhase={setPhase} />, |
|
|
address: <Address setPhase={setPhase} />, |
|
|
}; |
|
|
|
|
|
return isMobile ? ( |
|
|
<div className="w-full flex flex-col px-4 pb-24"> |
|
|
{productsLength ? ( |
|
|
<> |
|
|
<div className="flex flex-col flex-1">{layouts[phase]}</div> |
|
|
{phase !== "address" && ( |
|
|
<> |
|
|
<div className="flex flex-col w-full border-t border-gray-300 border-b"> |
|
|
<PriceStatus |
|
|
name="مبلغ سبد خرید" |
|
|
value={productsLength ? factorInfo?.sumPrice : 0} |
|
|
type="normal" |
|
|
/> |
|
|
<PriceStatus |
|
|
name="میزان تخفیف" |
|
|
value={productsLength ? factorInfo?.offPrice : 0} |
|
|
type="error" |
|
|
/> |
|
|
{/* <PriceStatus |
|
|
name="مالیات بر ارزش افزوده" |
|
|
value={productsLength ? factorInfo?.sumPrice * 0.009 : 0} |
|
|
type="error" |
|
|
/> */} |
|
|
</div> |
|
|
<div className="flex flex-row justify-between items-center w-full py-3"> |
|
|
<strong className="font-bold text-tiny text-blue5F dark:text-white"> |
|
|
جمع کل سبد خرید |
|
|
</strong> |
|
|
<p className="font-medium text-greenBA text-lg dark:text-white"> |
|
|
{separate(productsLength ? factorInfo?.payPrice : 0) + |
|
|
" " + |
|
|
"تومان"} |
|
|
</p> |
|
|
</div> |
|
|
<div |
|
|
className="w-full rounded-md flex flex-row justify-center items-center py-2.5 px-3 mt-5 mb-4" |
|
|
style={{ backgroundColor: isDark ? "#DEFFF111" : "#DEFFF188" }} |
|
|
> |
|
|
<img src={alertIcon} className="w-5 ml-2" /> |
|
|
<p className="text-xs text-green71 dark:text-white text-justify font-medium"> |
|
|
هزینه ارسال کالا پس از تعیین محل آدرس مشخص میشود |
|
|
</p> |
|
|
</div> |
|
|
<Button |
|
|
title="ادامه فرایند خرید" |
|
|
backgroundColor="bg-blueC0" |
|
|
border={{ color: "#196EC055", width: "0px" }} |
|
|
width="100%" |
|
|
color="text-white" |
|
|
onClick={next[phase]} |
|
|
/> |
|
|
{phase !== "products" && ( |
|
|
<button |
|
|
className="bg-transparent mt-4 text-base border border-blueC0 text-blueC0 font-bold rounded-md py-3.5 flex flex-row justify-center items-center" |
|
|
onClick={() => setPhase("products")} |
|
|
> |
|
|
{window.t("بازگشت")} |
|
|
|
|
|
<img |
|
|
src={dropdownIcon} |
|
|
alt="" |
|
|
className="w-4 transform rotate-90" |
|
|
/> |
|
|
</button> |
|
|
)} |
|
|
</> |
|
|
)} |
|
|
</> |
|
|
) : ( |
|
|
<Empty |
|
|
text="سبد خرید شما خالی است." |
|
|
buttonText="فروشگاه" |
|
|
buttonAction={() => navigation("/products")} |
|
|
/> |
|
|
)} |
|
|
</div> |
|
|
) : ( |
|
|
<div |
|
|
className={`w-11/12 mx-auto flex flex-row relative gap-10 px-5 mt-10 pb-20 pt-16 ${ |
|
|
desktopContentTransform ? "top-24" : "" |
|
|
}`} |
|
|
> |
|
|
<div className="flex flex-col flex-1">{layouts[phase]}</div> |
|
|
{console.log(list)} |
|
|
{list?.filter((product) => product?.condition < 2)?.length |
|
|
? phase !== "address" && ( |
|
|
<div |
|
|
className="flex flex-col w-1/4 p-10 bg-white shadow-all rounded-md px-4 py-4" |
|
|
style={{ height: "fit-content", minWidth: 350 }} |
|
|
> |
|
|
<div className="flex flex-col w-full border-t py-2 border-gray-300 border-b"> |
|
|
<PriceStatus |
|
|
name="مبلغ سبد خرید" |
|
|
value={productsLength ? factorInfo?.sumPrice : ""} |
|
|
type="normal" |
|
|
/> |
|
|
<PriceStatus |
|
|
name="هزینه حمل و نقل" |
|
|
value={productsLength ? factorInfo?.transportPrice : 0} |
|
|
type="error" |
|
|
/> |
|
|
<PriceStatus |
|
|
name="میزان تخفیف" |
|
|
value={productsLength ? factorInfo?.offPrice : ""} |
|
|
type="error" |
|
|
/> |
|
|
{/* <PriceStatus |
|
|
name="مالیات بر ارزش افزوده" |
|
|
value={ |
|
|
productsLength |
|
|
? Math.floor(factorInfo?.sumPrice * 0.009) |
|
|
: "" |
|
|
} |
|
|
type="error" |
|
|
/> */} |
|
|
</div> |
|
|
<div className="flex flex-row justify-between items-center w-full py-4 border-t border-b border-grayDB border-solid"> |
|
|
<strong className="font-semibold text-tiny text-blue5F dark:text-white"> |
|
|
جمع کل سبد خرید |
|
|
</strong> |
|
|
<p className="font-medium text-greenBA text-lg dark:text-white"> |
|
|
{separate(productsLength ? factorInfo?.payPrice : "")} |
|
|
<span className="font-medium text-greenBA text-sm mr-2"> |
|
|
تومان |
|
|
</span> |
|
|
</p> |
|
|
</div> |
|
|
{phase === "products" && ( |
|
|
<div |
|
|
className="w-full rounded-md flex flex-row justify-center items-center py-2.5 px-3 mt-5 mb-4" |
|
|
style={{ backgroundColor: "#DEFFF188" }} |
|
|
> |
|
|
<img src={alertIcon} className="w-5 ml-2" /> |
|
|
<p className="text-xs text-green71 dark:text-white text-justify font-medium"> |
|
|
هزینه ارسال کالا پس از تعیین محل آدرس مشخص میشود |
|
|
</p> |
|
|
</div> |
|
|
)} |
|
|
{null && phase === "deliveryForm" && ( |
|
|
<div className="flex flex-col mt-10"> |
|
|
<strong className="text-tiny text-blue52 mb-5 font-medium"> |
|
|
انتخاب شیوه پرداخت |
|
|
</strong> |
|
|
<Button |
|
|
title="از طریق درگاه پرداخت" |
|
|
backgroundColor="bg-transparent" |
|
|
border={{ color: "#77777755", width: "1px" }} |
|
|
width="100%" |
|
|
color="text-blue52" |
|
|
onClick={() => {}} |
|
|
/> |
|
|
<br /> |
|
|
<Button |
|
|
title="پرداخت در محل" |
|
|
backgroundColor="bg-transparent" |
|
|
border={{ color: "#77777755", width: "1px" }} |
|
|
width="100%" |
|
|
color="text-blue52" |
|
|
onClick={() => {}} |
|
|
/> |
|
|
<br /> |
|
|
<br /> |
|
|
</div> |
|
|
)} |
|
|
<br /> |
|
|
<br /> |
|
|
<Button |
|
|
title={ |
|
|
phase === "deliveryForm" |
|
|
? "پرداخت" |
|
|
: userProducts.filter((object) => object.productType === 2) |
|
|
.length > 0 |
|
|
? "ادامه فرایند خرید" |
|
|
: "پرداخت" |
|
|
} |
|
|
backgroundColor="bg-blueC0" |
|
|
border={{ color: "#196EC055", width: "0px" }} |
|
|
width="100%" |
|
|
color="text-white" |
|
|
onClick={next[phase]} |
|
|
// loading={loading} |
|
|
/> |
|
|
{phase === "deliveryForm" && ( |
|
|
<button |
|
|
className="bg-transparent mt-4 text-base lg:text-tiny border border-blueC0 text-blueC0 font-bold rounded-md py-3.5 lg:py-4 flex flex-row justify-center items-center" |
|
|
onClick={() => setPhase("products")} |
|
|
> |
|
|
{window.t("بازگشت")} |
|
|
<img |
|
|
src={dropdownIcon} |
|
|
alt="" |
|
|
className="w-4 transform rotate-90" |
|
|
/> |
|
|
</button> |
|
|
)} |
|
|
</div> |
|
|
) |
|
|
: null} |
|
|
</div> |
|
|
); |
|
|
} |
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
isDark: state.publicApi.isDark, |
|
|
isMobile: state.publicApi.isMobile, |
|
|
list: state.userProduct.list, |
|
|
payPrice: state.userProduct.sum, |
|
|
factorInfo: state.userFactor.info, |
|
|
user: state.user.status, |
|
|
hasPhysical: state.userProduct.hasPhysical, |
|
|
desktopContentTransform: state.publicApi.desktopContentTransform, |
|
|
userProducts: state.userProduct.list, |
|
|
loading: state.userProduct.loading, |
|
|
isLogin: state.user.status, |
|
|
}); |
|
|
|
|
|
const mapDispatchToProps = { |
|
|
getList: userProduct.list, |
|
|
getInfo: userProduct.info, |
|
|
getFactorInfo: userFactor.info, |
|
|
payFactor: userFactor.payment, |
|
|
setHeaderOptions: publicApi.setHeaderOptions, |
|
|
setDialog: dialog.set, |
|
|
}; |
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ShoppingCart);
|
|
|
|