83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { ShoppingCart, CheckCircle, Loader2 } from "lucide-react"
|
|
import { useCart } from "@/lib/cart/context"
|
|
import { toast } from "sonner"
|
|
import type { Product } from "@/lib/products/types"
|
|
|
|
interface AddToCartButtonProps {
|
|
product: Product
|
|
}
|
|
|
|
export function AddToCartButton({ product }: AddToCartButtonProps) {
|
|
const { addItem } = useCart()
|
|
const [isAdding, setIsAdding] = useState(false)
|
|
const [isAdded, setIsAdded] = useState(false)
|
|
|
|
const handleAddToCart = () => {
|
|
if (isAdding || isAdded) return
|
|
|
|
setIsAdding(true)
|
|
setIsAdded(false)
|
|
|
|
try {
|
|
addItem({
|
|
id: product.id,
|
|
name: product.name,
|
|
price: product.price,
|
|
priceId: product.priceId!,
|
|
image: product.images?.[0] || "/placeholder.svg",
|
|
quantity: 1,
|
|
})
|
|
|
|
// Show success feedback
|
|
setIsAdded(true)
|
|
toast.success(`${product.name} added to cart!`)
|
|
|
|
// Reset states after showing feedback
|
|
setTimeout(() => {
|
|
setIsAdding(false)
|
|
setIsAdded(false)
|
|
}, 2000)
|
|
} catch (error) {
|
|
console.error("Error adding to cart:", error)
|
|
toast.error("Failed to add item to cart")
|
|
setIsAdding(false)
|
|
}
|
|
}
|
|
|
|
if (!product.priceId) {
|
|
return (
|
|
<Button disabled className="w-full">
|
|
<span className="flex items-center gap-2">
|
|
<span>Product unavailable</span>
|
|
</span>
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
onClick={handleAddToCart}
|
|
disabled={isAdding || isAdded}
|
|
variant="brand"
|
|
className="w-full h-12"
|
|
size="lg"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
{isAdding ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : isAdded ? (
|
|
<CheckCircle className="h-4 w-4 text-green-500" />
|
|
) : (
|
|
<ShoppingCart className="h-4 w-4" />
|
|
)}
|
|
<span>
|
|
{isAdding ? "Adding..." : isAdded ? "Added!" : "Add to Cart"}
|
|
</span>
|
|
</div>
|
|
</Button>
|
|
)
|
|
}
|