128 lines
4.3 KiB
TypeScript
128 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { products } from "../data/products";
|
|
import { useCart } from "../contexts/CartContext";
|
|
import type { Product, CartItem } from "../types/product";
|
|
|
|
export default function ProductSelection() {
|
|
const { dispatch } = useCart();
|
|
const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
|
|
const [quantity, setQuantity] = useState(1);
|
|
const [deliveryOption, setDeliveryOption] = useState<
|
|
"shulker" | "chests" | "pickup"
|
|
>("chests");
|
|
const [variant, setVariant] = useState("");
|
|
|
|
const handleAddToCart = () => {
|
|
if (!selectedProduct) return;
|
|
|
|
const item: CartItem = {
|
|
product: selectedProduct,
|
|
quantity,
|
|
unit: "stacks",
|
|
deliveryOption,
|
|
variant: variant || undefined,
|
|
};
|
|
|
|
dispatch({ type: "ADD_ITEM", payload: item });
|
|
|
|
setSelectedProduct(null);
|
|
setQuantity(1);
|
|
setVariant("");
|
|
};
|
|
|
|
const getProductPrice = (product: Product) => {
|
|
if (product.defaultStacksPerDia) {
|
|
return `${product.defaultStacksPerDia} Stacks = 1 Dia`;
|
|
}
|
|
return `1 Stack = ${product.pricePerStack} Dia`;
|
|
};
|
|
|
|
return (
|
|
<div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
|
|
<h2 className="text-2xl font-bold text-green-400 mb-6">
|
|
Lägg till produkt
|
|
</h2>
|
|
|
|
<div className="space-y-6">
|
|
<div>
|
|
<label className="block text-gray-300 mb-2">Produkt:</label>
|
|
<select
|
|
value={selectedProduct?.id || ""}
|
|
onChange={(e) => {
|
|
const product = products.find((p) => p.id === e.target.value);
|
|
setSelectedProduct(product || null);
|
|
setVariant("");
|
|
}}
|
|
className="w-full bg-gray-700 text-white p-3 rounded border border-gray-600 focus:border-green-400 focus:outline-none"
|
|
>
|
|
<option value="">Välj en produkt</option>
|
|
{products.map((product) => (
|
|
<option key={product.id} value={product.id}>
|
|
{product.name} ({getProductPrice(product)})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{selectedProduct?.variants && (
|
|
<div>
|
|
<label className="block text-gray-300 mb-2">Variant:</label>
|
|
<select
|
|
value={variant}
|
|
onChange={(e) => setVariant(e.target.value)}
|
|
className="w-full bg-gray-700 text-white p-3 rounded border border-gray-600 focus:border-green-400 focus:outline-none"
|
|
>
|
|
<option value="">Välj variant</option>
|
|
{selectedProduct.variants.map((variant) => (
|
|
<option key={variant} value={variant}>
|
|
{variant}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<label className="block text-gray-300 mb-2">Antal stackar:</label>
|
|
<input
|
|
type="number"
|
|
value={quantity}
|
|
onChange={(e) =>
|
|
setQuantity(Math.max(1, parseInt(e.target.value) || 1))
|
|
}
|
|
min="1"
|
|
className="w-full bg-gray-700 text-white p-3 rounded border border-gray-600 focus:border-green-400 focus:outline-none"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-gray-300 mb-2">Leveransbehållare:</label>
|
|
<select
|
|
value={deliveryOption}
|
|
onChange={(e) =>
|
|
setDeliveryOption(
|
|
e.target.value as "shulker" | "chests" | "pickup",
|
|
)
|
|
}
|
|
className="w-full bg-gray-700 text-white p-3 rounded border border-gray-600 focus:border-green-400 focus:outline-none"
|
|
>
|
|
<option value="chests">Kistor (standard)</option>
|
|
<option value="shulker">Shulker (+1 Dia)</option>
|
|
<option value="pickup">Pickup (-10% rabatt)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleAddToCart}
|
|
disabled={!selectedProduct || (selectedProduct.variants && !variant)}
|
|
className="w-full bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white font-semibold py-3 px-4 rounded transition-colors"
|
|
>
|
|
Lägg till i kundvagn
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|