106 lines
4.1 KiB
TypeScript
106 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from "react";
|
|
import { Plus, Minus, Trash2, ShoppingCart } from "lucide-react";
|
|
import { useCart } from "./context/cartcontext"; // مسیر را تنظیم کنید
|
|
import { addToCartApi, updateCartItemQuantityApi, removeCartItemApi } from "@/public/src/services/cart/api"; // مسیر را تنظیم کنید
|
|
import { Product } from "@/public/src/types/product";
|
|
|
|
interface CartControlsProps {
|
|
product: Product;
|
|
// اگر کاربر لاگین باشد و محصول در سبد باشد، این آیدی باید پاس داده شود
|
|
cartItemId?: string | null;
|
|
quantity: number;
|
|
}
|
|
|
|
export default function CartControls({ product, cartItemId, quantity }: CartControlsProps) {
|
|
const { addToCart, decreaseQuantity } = useCart();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const isLoggedIn = typeof window !== 'undefined' ? !!localStorage.getItem('refreshToken') : false;
|
|
|
|
// هندلر افزایش یا افزودن جدید
|
|
const handleIncrease = async (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
if (isLoggedIn) {
|
|
try {
|
|
setIsLoading(true);
|
|
if (quantity === 0) {
|
|
// افزودن محصول جدید به سبد سرور
|
|
await addToCartApi(product.id, 1);
|
|
} else if (cartItemId) {
|
|
// افزایش تعداد محصول موجود در سبد سرور
|
|
await updateCartItemQuantityApi(cartItemId, quantity + 1);
|
|
}
|
|
window.dispatchEvent(new Event('cartUpdated'));
|
|
} catch (error) {
|
|
console.error("خطا در ارتباط با سرور:", error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
} else {
|
|
// کاربر مهمان
|
|
addToCart(product);
|
|
}
|
|
};
|
|
|
|
// هندلر کاهش یا حذف
|
|
const handleDecrease = async (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
if (isLoggedIn && cartItemId) {
|
|
try {
|
|
setIsLoading(true);
|
|
if (quantity <= 1) {
|
|
await removeCartItemApi(cartItemId);
|
|
} else {
|
|
await updateCartItemQuantityApi(cartItemId, quantity - 1);
|
|
}
|
|
window.dispatchEvent(new Event('cartUpdated'));
|
|
} catch (error) {
|
|
console.error("خطا در کاهش محصول:", error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
} else {
|
|
// کاربر مهمان
|
|
decreaseQuantity(product.id);
|
|
}
|
|
};
|
|
|
|
if (quantity > 0) {
|
|
return (
|
|
<div
|
|
className="flex items-center gap-3 bg-white border border-gray-200 rounded-lg py-1 px-2 shadow-sm"
|
|
onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}
|
|
>
|
|
<button onClick={handleIncrease} disabled={isLoading} className="cursor-pointer py-[3px] text-gray-500 hover:text-green-600 disabled:opacity-50 transition-colors">
|
|
<Plus size={16} />
|
|
</button>
|
|
|
|
<span className="text-xs font-bold text-gray-800 w-3 text-center">
|
|
{isLoading ? "..." : quantity}
|
|
</span>
|
|
|
|
<button onClick={handleDecrease} disabled={isLoading} className="cursor-pointer py-[3px] text-gray-500 hover:text-red-500 disabled:opacity-50 transition-colors">
|
|
{quantity <= 1 ? <Trash2 size={16} /> : <Minus size={16} />}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={handleIncrease}
|
|
disabled={isLoading}
|
|
className="rounded-lg cursor-pointer border border-[#e6e6e6] bg-gray-50 flex items-center p-2 text-gray-600 hover:bg-gray-200 disabled:opacity-50 transition-colors"
|
|
title="افزودن به سبد خرید"
|
|
>
|
|
<ShoppingCart size={16} />
|
|
</button>
|
|
);
|
|
}
|