111 lines
4.0 KiB
JavaScript
111 lines
4.0 KiB
JavaScript
"use client";
|
|
import AppContext from "@ctx/AppContext";
|
|
import PersianNumber from "plugins/PersianNumber";
|
|
import { useContext } from "react";
|
|
|
|
const AddToCart = ({ data, theme }) => {
|
|
const CTX = useContext(AppContext);
|
|
const cart = CTX.state.cart;
|
|
|
|
const handleAddItemToCart = (id) => {
|
|
CTX.AddItemToCart(
|
|
data?.id,
|
|
data?.persianName,
|
|
data?.cost,
|
|
data?.costWithDiscount,
|
|
data?.mainImage,
|
|
data?.hasDiscount,
|
|
data?.maxOrderCount
|
|
);
|
|
};
|
|
return (
|
|
<>
|
|
{theme == 1 && (
|
|
<>
|
|
{" "}
|
|
{data?.stock == 0 ? (
|
|
<div className="bg-gray-200 w-full h-fit p-2 rounded-xl">
|
|
<p className="mb-0 text-[12px] text-center ">اتمام موجودی</p>
|
|
</div>
|
|
) : (
|
|
<div className="flex">
|
|
{!cart.find((item) => item.id === data?.id) ? (
|
|
<div className="w-[25px] h-[25px] bg-gray-100 overflow-hidden rounded-lg text-center p-1 m-1 cursor-pointer">
|
|
<div onClick={() => handleAddItemToCart()}>
|
|
<p className="mb-0 text-[25px] mt-[-10px]">+</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex rtl bg-gray-50 p-1 h-fit rounded-lg">
|
|
<div
|
|
className="w-[25px] h-[25px] bg-gray-200 overflow-hidden rounded-lg text-center cursor-pointer "
|
|
onClick={() => handleAddItemToCart()}
|
|
>
|
|
<p className="mb-0 text-[20px] mt-[-2px]">+</p>
|
|
</div>
|
|
<p className="mb-0 mx-2 mt-1 text-sm ">
|
|
<PersianNumber
|
|
number={cart.find((item) => item.id === data?.id).count}
|
|
/>
|
|
</p>
|
|
<div
|
|
className="w-[25px] h-[25px] bg-red-200 overflow-hidden rounded-lg text-center cursor-pointer "
|
|
onClick={() => CTX.RemoveItemFromCart(data?.id)}
|
|
>
|
|
<p className="mb-0 text-[20px] mt-[-2px]">-</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{theme == 2 && (
|
|
<>
|
|
{" "}
|
|
{data?.stock == 0 ? (
|
|
<div className="bg-gray-200 w-fit px-5 h-fit p-2 rounded-xl">
|
|
<p className="mb-0 text-[12px] text-center ">اتمام موجودی</p>
|
|
</div>
|
|
) : (
|
|
<div className="flex">
|
|
{!cart.find((item) => item.id === data?.id) ? (
|
|
<div className=" bg-primary-500 overflow-hidden rounded-lg text-center p-1 px-5 cursor-pointer">
|
|
<div onClick={() => handleAddItemToCart()}>
|
|
<p className="mb-0 text-sm text-white xs:mt-[6px] lg:mt-[2px]">
|
|
افزودن به سبد
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex rtl bg-gray-50 p-1 h-fit rounded-lg">
|
|
<div
|
|
className="w-[25px] h-[25px] bg-gray-200 overflow-hidden rounded-lg text-center cursor-pointer "
|
|
onClick={() => handleAddItemToCart()}
|
|
>
|
|
<p className="mb-0 text-[20px] mt-[-2px]">+</p>
|
|
</div>
|
|
<p className="mb-0 mx-2 mt-1 text-sm ">
|
|
<PersianNumber
|
|
number={cart.find((item) => item.id === data?.id).count}
|
|
/>
|
|
</p>
|
|
<div
|
|
className="w-[25px] h-[25px] bg-red-200 overflow-hidden rounded-lg text-center cursor-pointer "
|
|
onClick={() => CTX.RemoveItemFromCart(data?.id)}
|
|
>
|
|
<p className="mb-0 text-[20px] mt-[-2px]">-</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AddToCart;
|