77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { useTranslation } from "@/lib/hooks/useTranslation";
|
|
import { addItem } from "components/cart/actions";
|
|
import { useCart } from "components/cart/cart-context";
|
|
import { Product, ProductVariant } from "lib/shopify/types";
|
|
import { useState } from "react";
|
|
import { Button } from "./Button";
|
|
|
|
interface AddToCartButtonProps {
|
|
product: Product;
|
|
className?: string;
|
|
variantId?: string;
|
|
}
|
|
|
|
export function AddToCartButton({ product, className = "", variantId }: AddToCartButtonProps) {
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const { addCartItem } = useCart();
|
|
const { t } = useTranslation();
|
|
|
|
const handleAddToCart = async () => {
|
|
if (isLoading) return;
|
|
|
|
setIsLoading(true);
|
|
|
|
// Get the selected variant or default to the first variant
|
|
let selectedVariant: ProductVariant | undefined;
|
|
|
|
if (variantId) {
|
|
selectedVariant = product.variants.find(v => v.id === variantId);
|
|
}
|
|
|
|
// If no specified variant or variant not found, use the first one
|
|
if (!selectedVariant) {
|
|
selectedVariant = product.variants[0];
|
|
}
|
|
|
|
if (!selectedVariant || !selectedVariant.id) {
|
|
setIsLoading(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Add to backend cart
|
|
await addItem(null, selectedVariant.id, 1);
|
|
|
|
// Update local cart state
|
|
addCartItem(selectedVariant, product, 1);
|
|
|
|
// Set success message or notification here if needed
|
|
} catch (error) {
|
|
console.error("Failed to add item to cart:", error);
|
|
// Handle error (could show error message)
|
|
} finally {
|
|
setTimeout(() => {
|
|
setIsLoading(false);
|
|
}, 500);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
onClick={handleAddToCart}
|
|
disabled={isLoading || !product.availableForSale}
|
|
variant="primary"
|
|
size="lg"
|
|
className={`w-full ${className}`}
|
|
>
|
|
{isLoading
|
|
? t('product.adding')
|
|
: !product.availableForSale
|
|
? t('product.outOfStock')
|
|
: t('product.addToCart')
|
|
}
|
|
</Button>
|
|
);
|
|
}
|