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.
 
 
 

307 lines
9.9 KiB

import React, { useState, useEffect } from "react";
import { userProduct, userFactor, publicApi } from "../../redux/actions";
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";
//assets
import dropdownIcon from "../../assets/icons/dropdown-blue.svg";
import alertIcon from "../../assets/icons/alert.svg";
import { connect } from "react-redux";
function ShoppingCart({
isDark,
isMobile,
list,
payPrice,
factorInfo,
user,
hasPhysical,
getList,
getInfo,
getFactorInfo,
payFactor,
headerOptions,
setHeaderOptions,
desktopContentTransform,
userProducts,
loading,
}) {
const [phase, setPhase] = useState("products");
useEffect(() => {
getList();
getFactorInfo({ userId: user?.id });
setHeaderOptions(headerOptions);
}, []);
const productsLength = userProducts?.filter(
(product) => product.condition < 2
)?.length;
const next = {
products: () =>
productsLength
? setPhase("deliveryForm")
: toast.info("ابتدا یک محصول را به سبد خرید خود اضافه کنید."),
deliveryForm: () => console.log("Go to shaparak"),
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.map(
(product, index) =>
product.condition < 2 && (
<Product loading={loading} key={index} product={product} />
)
)}
</ul>
</div>
);
};
const PriceStatus = ({ name, value, type }) => {
return isMobile ? (
<div className="w-full flex flex-row justify-between py-2">
<strong className="font-light text-sm dark:text-white">{name}</strong>
<span
className="font-bold text-lg dark:text-white"
style={{
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
}}
>
{value + " " + "تومان"}
</span>
</div>
) : (
<div className="w-full flex flex-row justify-between py-4">
<strong className="font-light text-tiny dark:text-white text-blue5F">
{name}
</strong>
<span
className="font-medium text-lg dark:text-white"
style={{
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
}}
>
{separate(value)}
<span
style={{
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
}}
className="text-sm mr-2"
>
تومان
</span>
</span>
</div>
);
};
const layouts = {
products: productsLength ? (
<Table />
) : (
<strong className="text-blueC0">سبد خرید شما خالی است.</strong>
),
deliveryForm: <DeliveryForm setPhase={setPhase} />,
address: <Address setPhase={setPhase} />,
};
return isMobile ? (
<div className="w-full flex flex-col px-4">
{list.map((product, index) => (
<Product key={index} product={product} />
))}
<Code />
<div className="flex flex-col w-full border-t py-2 border-gray-300 border-b mt-6">
<PriceStatus
name="مبلغ سبد خرید"
value={factorInfo?.sumPrice}
type="normal"
/>
<PriceStatus
name="میزان تخفیف"
value={factorInfo?.offPrice}
type="error"
/>
<PriceStatus
name="مالیات بر ارزش افزوده"
value={factorInfo?.sumPrice * 0.009}
type="error"
/>
</div>
<div className="flex flex-row justify-between items-center w-full py-3">
<strong className="font-light text-sm dark:text-white">
جمع کل سبد خرید
</strong>
<p className="font-medium text-greenBA text-lg dark:text-white">
{factorInfo?.payPrice + " " + "تومان"}
</p>
</div>
<div
className="w-full rounded-md flex flex-row justify-center items-center py-2.5 px-3 my-5"
style={{ backgroundColor: "#196EC01a" }}
>
<img src={alertIcon} className="w-5 ml-2" />
<p className="text-xs text-blueC0 dark:text-white">
هزینه ارسال کالا پس از تعیین محل آدرس مشخص میشود
</p>
</div>
<Button
title="ادامه فرایند خرید"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
width="100%"
color="text-white"
onClick={() => {}}
/>
</div>
) : (
<div
className={`w-11/12 mx-auto flex flex-row relative gap-10 px-5 mt-10 pb-20 pt-24 ${
desktopContentTransform ? "top-24" : ""
}`}
>
<div className="flex flex-col flex-1">{layouts[phase]}</div>
{phase !== "address" && (
<div
className="flex flex-col w-1/4 p-10 bg-grayF9 border border-solid border-grayDB 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 : 0}
type="normal"
/>
<PriceStatus
name="میزان تخفیف"
value={productsLength ? factorInfo?.offPrice : 0}
type="error"
/>
<PriceStatus
name="مالیات بر ارزش افزوده"
value={
productsLength ? Math.floor(factorInfo?.sumPrice * 0.009) : 0
}
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-medium text-tiny text-blue5F dark:text-white">
جمع کل سبد خرید
</strong>
<p className="font-medium text-greenBA text-xl dark:text-white">
{separate(productsLength ? factorInfo?.payPrice : 0)}
<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-10 mb-4"
style={{ backgroundColor: "#196EC01a" }}
>
<img src={alertIcon} className="w-5 ml-2" />
<p className="text-xs text-blueC0 dark:text-white text-justify">
هزینه ارسال کالا پس از تعیین محل آدرس مشخص میشود
</p>
</div>
)}
{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>
)}
<Button
title="ادامه فرایند خرید"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
width="100%"
color="text-white"
onClick={next[phase]}
// loading={loading}
/>
{phase === "deliveryForm" && (
<button
className="bg-transparent mt-4 text-tiny text-blueC0 py-3 flex flex-row justify-center items-center"
onClick={() => setPhase("products")}
>
بازگشت
<img
src={dropdownIcon}
alt=""
className="w-4 transform rotate-90"
/>
</button>
)}
</div>
)}
</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
});
const mapDispatchToProps = {
getList: userProduct.list,
getInfo: userProduct.info,
getFactorInfo: userFactor.info,
payFactor: userFactor.payment,
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(ShoppingCart);