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.
 
 
 

401 lines
13 KiB

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/dropdown-blue.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,
}) {
const [phase, setPhase] = useState("products");
const navigation = useNavigate();
useEffect(() => {
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 />
) : (
<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={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-bold text-tiny text-blue5F dark:text-white">
جمع کل سبد خرید
</strong>
<p className="font-medium text-greenBA text-lg dark:text-white">
{separate(factorInfo?.payPrice) + " " + "تومان"}
</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-2 border-solid border-blueC0 text-green7B dark:text-blueC0 rounded-full py-3 flex flex-row justify-center items-center"
onClick={() => setPhase("products")}
>
بازگشت
<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>
{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?.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-tiny border border-solid border-blueC0 text-green7B rounded-full 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,
setDialog: dialog.set,
};
export default connect(mapStateToProps, mapDispatchToProps)(ShoppingCart);