62 lines
1.2 KiB
TypeScript
62 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from "@/components/ui/Button";
|
|
import { useAppDispatch } from "@/lib/redux/hooks";
|
|
import { addToBox } from "@/lib/redux/slices/boxSlice";
|
|
import { useState } from "react";
|
|
|
|
interface AddToBoxButtonProps {
|
|
productId: string;
|
|
name: string;
|
|
price: number;
|
|
image: string;
|
|
variantId?: string;
|
|
color?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function AddToBoxButton({
|
|
productId,
|
|
name,
|
|
price,
|
|
image,
|
|
variantId,
|
|
color,
|
|
className = ""
|
|
}: AddToBoxButtonProps) {
|
|
const dispatch = useAppDispatch();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const handleAddToBox = () => {
|
|
if (isLoading) return;
|
|
|
|
setIsLoading(true);
|
|
|
|
dispatch(addToBox({
|
|
id: productId,
|
|
name,
|
|
price,
|
|
image,
|
|
quantity: 1,
|
|
variantId,
|
|
color
|
|
}));
|
|
|
|
// Add a small delay to simulate adding to cart for better UX
|
|
setTimeout(() => {
|
|
setIsLoading(false);
|
|
}, 500);
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
onClick={handleAddToBox}
|
|
disabled={isLoading}
|
|
variant="primary"
|
|
size="lg"
|
|
className={`w-full ${className}`}
|
|
>
|
|
{isLoading ? "Dodaje se..." : "Dodaj u box"}
|
|
</Button>
|
|
);
|
|
}
|