feat: Improve Bottle Split UX
- Add 'Split starten' button to bottle detail page - Support flexible sample sizes (1-20cl) instead of fixed 5/10cl - Preselect bottle when coming from bottle page - Save sample sizes/shipping defaults to localStorage - Update schema: sample_sizes JSONB array - Update server actions and UI for dynamic sizes
This commit is contained in:
@@ -4,7 +4,7 @@ import React, { useState, useEffect } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { ChevronLeft, Share2, User, Package, Truck, Loader2, CheckCircle2, Clock, AlertCircle } from 'lucide-react';
|
||||
import { getSplitBySlug, requestSlot, SplitDetails, ShippingOption } from '@/services/split-actions';
|
||||
import { getSplitBySlug, requestSlot, SplitDetails, SampleSize, ShippingOption } from '@/services/split-actions';
|
||||
import SplitProgressBar from '@/components/SplitProgressBar';
|
||||
import { createClient } from '@/lib/supabase/client';
|
||||
|
||||
@@ -15,8 +15,7 @@ export default function SplitPublicPage() {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Request form
|
||||
const [selectedAmount, setSelectedAmount] = useState<5 | 10>(5);
|
||||
const [selectedAmount, setSelectedAmount] = useState<number | null>(null);
|
||||
const [selectedShipping, setSelectedShipping] = useState<string>('');
|
||||
const [isRequesting, setIsRequesting] = useState(false);
|
||||
const [requestSuccess, setRequestSuccess] = useState(false);
|
||||
@@ -41,6 +40,9 @@ export default function SplitPublicPage() {
|
||||
if (result.data.shippingOptions.length > 0) {
|
||||
setSelectedShipping(result.data.shippingOptions[0].name);
|
||||
}
|
||||
if (result.data.sampleSizes.length > 0) {
|
||||
setSelectedAmount(result.data.sampleSizes[0].cl);
|
||||
}
|
||||
} else {
|
||||
setError(result.error || 'Split nicht gefunden');
|
||||
}
|
||||
@@ -52,7 +54,8 @@ export default function SplitPublicPage() {
|
||||
|
||||
const pricePerCl = split.priceBottle / split.totalVolume;
|
||||
const whisky = pricePerCl * amountCl;
|
||||
const glass = amountCl === 5 ? split.costGlass5cl : split.costGlass10cl;
|
||||
const sizeOption = split.sampleSizes.find(s => s.cl === amountCl);
|
||||
const glass = sizeOption?.glassCost || 0;
|
||||
const shippingOption = split.shippingOptions.find(s => s.name === selectedShipping);
|
||||
const shipping = shippingOption?.price || 0;
|
||||
|
||||
@@ -65,7 +68,7 @@ export default function SplitPublicPage() {
|
||||
};
|
||||
|
||||
const handleRequest = async () => {
|
||||
if (!selectedShipping) return;
|
||||
if (!selectedShipping || !selectedAmount) return;
|
||||
|
||||
setIsRequesting(true);
|
||||
setRequestError(null);
|
||||
@@ -74,7 +77,7 @@ export default function SplitPublicPage() {
|
||||
|
||||
if (result.success) {
|
||||
setRequestSuccess(true);
|
||||
fetchSplit(); // Refresh data
|
||||
fetchSplit();
|
||||
} else {
|
||||
setRequestError(result.error || 'Anfrage fehlgeschlagen');
|
||||
}
|
||||
@@ -84,7 +87,7 @@ export default function SplitPublicPage() {
|
||||
|
||||
const userParticipation = split?.participants.find(p => p.userId === currentUserId);
|
||||
const canRequest = !userParticipation && currentUserId && currentUserId !== split?.hostId;
|
||||
const isWaitlist = split && split.remaining < selectedAmount;
|
||||
const isWaitlist = split && selectedAmount && split.remaining < selectedAmount;
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
@@ -104,12 +107,11 @@ export default function SplitPublicPage() {
|
||||
);
|
||||
}
|
||||
|
||||
const price = calculatePrice(selectedAmount);
|
||||
const price = selectedAmount ? calculatePrice(selectedAmount) : { whisky: 0, glass: 0, shipping: 0, total: 0 };
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-zinc-950 p-4 md:p-8 lg:p-12">
|
||||
<div className="max-w-2xl mx-auto space-y-6">
|
||||
{/* Back */}
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-flex items-center gap-2 text-zinc-500 hover:text-orange-600 transition-colors font-bold uppercase text-[10px] tracking-[0.2em]"
|
||||
@@ -120,7 +122,6 @@ export default function SplitPublicPage() {
|
||||
|
||||
{/* Hero */}
|
||||
<div className="bg-zinc-900 rounded-3xl overflow-hidden border border-zinc-800 shadow-xl">
|
||||
{/* Bottle Image */}
|
||||
{split.bottle.imageUrl && (
|
||||
<div className="h-48 md:h-64 bg-zinc-800 relative">
|
||||
<img
|
||||
@@ -145,7 +146,6 @@ export default function SplitPublicPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Stats Row */}
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{split.bottle.abv && (
|
||||
<span className="px-3 py-1.5 bg-zinc-800 rounded-xl text-xs font-bold text-zinc-300">
|
||||
@@ -162,7 +162,6 @@ export default function SplitPublicPage() {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="pt-4">
|
||||
<SplitProgressBar
|
||||
totalVolume={split.totalVolume}
|
||||
@@ -185,20 +184,17 @@ export default function SplitPublicPage() {
|
||||
{/* Amount Selection */}
|
||||
<div className="space-y-3">
|
||||
<label className="text-xs font-bold text-zinc-500 uppercase tracking-widest">Menge</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{[5, 10].map(amount => (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{split.sampleSizes.map(size => (
|
||||
<button
|
||||
key={amount}
|
||||
onClick={() => setSelectedAmount(amount as 5 | 10)}
|
||||
className={`p-4 rounded-2xl border-2 transition-all ${selectedAmount === amount
|
||||
key={size.cl}
|
||||
onClick={() => setSelectedAmount(size.cl)}
|
||||
className={`px-4 py-3 rounded-xl border-2 transition-all ${selectedAmount === size.cl
|
||||
? 'border-orange-500 bg-orange-500/10'
|
||||
: 'border-zinc-700 hover:border-zinc-600'
|
||||
}`}
|
||||
>
|
||||
<span className="text-2xl font-black text-white">{amount}cl</span>
|
||||
<p className="text-xs text-zinc-500 mt-1">
|
||||
{amount === 5 ? 'Kleiner Taster' : 'Ordentliche Portion'}
|
||||
</p>
|
||||
<span className="text-lg font-black text-white">{size.cl}cl</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -210,12 +206,12 @@ export default function SplitPublicPage() {
|
||||
<Truck size={14} />
|
||||
Versand
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{split.shippingOptions.map(option => (
|
||||
<button
|
||||
key={option.name}
|
||||
onClick={() => setSelectedShipping(option.name)}
|
||||
className={`p-4 rounded-2xl border-2 transition-all text-left ${selectedShipping === option.name
|
||||
className={`px-4 py-3 rounded-xl border-2 transition-all text-left ${selectedShipping === option.name
|
||||
? 'border-orange-500 bg-orange-500/10'
|
||||
: 'border-zinc-700 hover:border-zinc-600'
|
||||
}`}
|
||||
@@ -228,36 +224,36 @@ export default function SplitPublicPage() {
|
||||
</div>
|
||||
|
||||
{/* Price Breakdown */}
|
||||
<div className="bg-zinc-950 rounded-2xl p-4 space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-zinc-500">Whisky ({selectedAmount}cl)</span>
|
||||
<span className="text-zinc-300">{price.whisky.toFixed(2)}€</span>
|
||||
{selectedAmount && (
|
||||
<div className="bg-zinc-950 rounded-2xl p-4 space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-zinc-500">Whisky ({selectedAmount}cl)</span>
|
||||
<span className="text-zinc-300">{price.whisky.toFixed(2)}€</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-zinc-500">Sample-Flasche</span>
|
||||
<span className="text-zinc-300">{price.glass.toFixed(2)}€</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-zinc-500">Versand ({selectedShipping})</span>
|
||||
<span className="text-zinc-300">{price.shipping.toFixed(2)}€</span>
|
||||
</div>
|
||||
<div className="border-t border-zinc-800 pt-2 mt-2 flex justify-between">
|
||||
<span className="font-bold text-white">Gesamt</span>
|
||||
<span className="font-black text-xl text-orange-500">{price.total.toFixed(2)}€</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-zinc-500">Sample-Flasche</span>
|
||||
<span className="text-zinc-300">{price.glass.toFixed(2)}€</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-zinc-500">Versand ({selectedShipping})</span>
|
||||
<span className="text-zinc-300">{price.shipping.toFixed(2)}€</span>
|
||||
</div>
|
||||
<div className="border-t border-zinc-800 pt-2 mt-2 flex justify-between">
|
||||
<span className="font-bold text-white">Gesamt</span>
|
||||
<span className="font-black text-xl text-orange-500">{price.total.toFixed(2)}€</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error */}
|
||||
{requestError && (
|
||||
<div className="bg-red-500/10 border border-red-500/30 rounded-xl p-3 text-sm text-red-400">
|
||||
{requestError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
onClick={handleRequest}
|
||||
disabled={isRequesting || !selectedShipping}
|
||||
disabled={isRequesting || !selectedShipping || !selectedAmount}
|
||||
className={`w-full py-4 rounded-2xl font-bold text-white transition-all flex items-center justify-center gap-2 ${isWaitlist
|
||||
? 'bg-yellow-600 hover:bg-yellow-700'
|
||||
: 'bg-orange-600 hover:bg-orange-700'
|
||||
@@ -280,7 +276,6 @@ export default function SplitPublicPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Success Message */}
|
||||
{requestSuccess && (
|
||||
<div className="bg-green-500/10 border border-green-500/30 rounded-3xl p-6 text-center">
|
||||
<CheckCircle2 size={48} className="mx-auto text-green-500 mb-4" />
|
||||
@@ -291,11 +286,10 @@ export default function SplitPublicPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Already Participating */}
|
||||
{userParticipation && (
|
||||
<div className="bg-zinc-900 rounded-3xl p-6 border border-zinc-800">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`w-12 h-12 rounded-xl flex items-center justify-center ${userParticipation.status === 'APPROVED' || userParticipation.status === 'PAID' || userParticipation.status === 'SHIPPED'
|
||||
<div className={`w-12 h-12 rounded-xl flex items-center justify-center ${['APPROVED', 'PAID', 'SHIPPED'].includes(userParticipation.status)
|
||||
? 'bg-green-500/20 text-green-500'
|
||||
: userParticipation.status === 'PENDING'
|
||||
? 'bg-yellow-500/20 text-yellow-500'
|
||||
@@ -316,7 +310,6 @@ export default function SplitPublicPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Not logged in */}
|
||||
{!currentUserId && (
|
||||
<div className="bg-zinc-900 rounded-3xl p-6 border border-zinc-800 text-center">
|
||||
<User size={32} className="mx-auto text-zinc-500 mb-3" />
|
||||
@@ -330,7 +323,6 @@ export default function SplitPublicPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Host View */}
|
||||
{currentUserId === split.hostId && (
|
||||
<div className="bg-zinc-900 rounded-3xl p-6 border border-zinc-800">
|
||||
<p className="text-sm text-zinc-500 mb-4">Du bist der Host dieses Splits</p>
|
||||
@@ -343,7 +335,6 @@ export default function SplitPublicPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Share Button */}
|
||||
<button
|
||||
onClick={() => navigator.share?.({ url: window.location.href })}
|
||||
className="w-full py-4 bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 rounded-2xl text-zinc-400 font-bold flex items-center justify-center gap-2 transition-colors"
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { ChevronLeft, ChevronRight, Package, Truck, Plus, X, Loader2, Check, Wine } from 'lucide-react';
|
||||
import { createSplit, ShippingOption } from '@/services/split-actions';
|
||||
import { createSplit, ShippingOption, SampleSize } from '@/services/split-actions';
|
||||
import { createClient } from '@/lib/supabase/client';
|
||||
|
||||
interface Bottle {
|
||||
@@ -14,10 +14,19 @@ interface Bottle {
|
||||
image_url?: string;
|
||||
}
|
||||
|
||||
const DEFAULT_SIZES: SampleSize[] = [
|
||||
{ cl: 2, glassCost: 0.50 },
|
||||
{ cl: 5, glassCost: 0.80 },
|
||||
{ cl: 10, glassCost: 1.50 },
|
||||
];
|
||||
|
||||
export default function CreateSplitPage() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const supabase = createClient();
|
||||
const [step, setStep] = useState(1);
|
||||
const preselectedBottleId = searchParams?.get('bottle');
|
||||
|
||||
const [step, setStep] = useState(preselectedBottleId ? 2 : 1);
|
||||
const [bottles, setBottles] = useState<Bottle[]>([]);
|
||||
const [isLoadingBottles, setIsLoadingBottles] = useState(true);
|
||||
|
||||
@@ -26,8 +35,9 @@ export default function CreateSplitPage() {
|
||||
const [totalVolume, setTotalVolume] = useState(70);
|
||||
const [hostShare, setHostShare] = useState(10);
|
||||
const [priceBottle, setPriceBottle] = useState('');
|
||||
const [costGlass5cl, setCostGlass5cl] = useState('0.80');
|
||||
const [costGlass10cl, setCostGlass10cl] = useState('1.50');
|
||||
const [sampleSizes, setSampleSizes] = useState<SampleSize[]>(DEFAULT_SIZES);
|
||||
const [newSizeCl, setNewSizeCl] = useState('');
|
||||
const [newSizeCost, setNewSizeCost] = useState('');
|
||||
const [shippingOptions, setShippingOptions] = useState<ShippingOption[]>([
|
||||
{ name: 'DHL', price: 5.50 },
|
||||
{ name: 'Hermes', price: 4.90 },
|
||||
@@ -43,12 +53,22 @@ export default function CreateSplitPage() {
|
||||
loadSavedDefaults();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (preselectedBottleId && bottles.length > 0) {
|
||||
const bottle = bottles.find(b => b.id === preselectedBottleId);
|
||||
if (bottle) {
|
||||
setSelectedBottle(bottle);
|
||||
}
|
||||
}
|
||||
}, [preselectedBottleId, bottles]);
|
||||
|
||||
const loadSavedDefaults = () => {
|
||||
const saved = localStorage.getItem('split-defaults');
|
||||
if (saved) {
|
||||
const defaults = JSON.parse(saved);
|
||||
setCostGlass5cl(defaults.costGlass5cl || '0.80');
|
||||
setCostGlass10cl(defaults.costGlass10cl || '1.50');
|
||||
if (defaults.sampleSizes) {
|
||||
setSampleSizes(defaults.sampleSizes);
|
||||
}
|
||||
if (defaults.shippingOptions) {
|
||||
setShippingOptions(defaults.shippingOptions);
|
||||
}
|
||||
@@ -57,8 +77,7 @@ export default function CreateSplitPage() {
|
||||
|
||||
const saveDefaults = () => {
|
||||
localStorage.setItem('split-defaults', JSON.stringify({
|
||||
costGlass5cl,
|
||||
costGlass10cl,
|
||||
sampleSizes,
|
||||
shippingOptions,
|
||||
}));
|
||||
};
|
||||
@@ -81,6 +100,19 @@ export default function CreateSplitPage() {
|
||||
setIsLoadingBottles(false);
|
||||
};
|
||||
|
||||
const addSampleSize = () => {
|
||||
if (!newSizeCl || !newSizeCost) return;
|
||||
const cl = parseInt(newSizeCl);
|
||||
if (sampleSizes.some(s => s.cl === cl)) return;
|
||||
setSampleSizes([...sampleSizes, { cl, glassCost: parseFloat(newSizeCost) }].sort((a, b) => a.cl - b.cl));
|
||||
setNewSizeCl('');
|
||||
setNewSizeCost('');
|
||||
};
|
||||
|
||||
const removeSampleSize = (cl: number) => {
|
||||
setSampleSizes(sampleSizes.filter(s => s.cl !== cl));
|
||||
};
|
||||
|
||||
const addShippingOption = () => {
|
||||
if (!newShippingName || !newShippingPrice) return;
|
||||
setShippingOptions([...shippingOptions, {
|
||||
@@ -96,7 +128,7 @@ export default function CreateSplitPage() {
|
||||
};
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!selectedBottle || !priceBottle) return;
|
||||
if (!selectedBottle || !priceBottle || sampleSizes.length === 0) return;
|
||||
|
||||
setIsCreating(true);
|
||||
setError(null);
|
||||
@@ -107,8 +139,7 @@ export default function CreateSplitPage() {
|
||||
totalVolume,
|
||||
hostShare,
|
||||
priceBottle: parseFloat(priceBottle),
|
||||
costGlass5cl: parseFloat(costGlass5cl),
|
||||
costGlass10cl: parseFloat(costGlass10cl),
|
||||
sampleSizes,
|
||||
shippingOptions,
|
||||
});
|
||||
|
||||
@@ -121,8 +152,6 @@ export default function CreateSplitPage() {
|
||||
};
|
||||
|
||||
const pricePerCl = priceBottle ? parseFloat(priceBottle) / totalVolume : 0;
|
||||
const price5cl = pricePerCl * 5 + parseFloat(costGlass5cl || '0');
|
||||
const price10cl = pricePerCl * 10 + parseFloat(costGlass10cl || '0');
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-zinc-950 p-4 md:p-8 lg:p-12">
|
||||
@@ -130,7 +159,7 @@ export default function CreateSplitPage() {
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Link
|
||||
href="/"
|
||||
href={preselectedBottleId ? `/bottles/${preselectedBottleId}` : '/'}
|
||||
className="inline-flex items-center gap-2 text-zinc-500 hover:text-orange-600 transition-colors font-bold uppercase text-[10px] tracking-[0.2em]"
|
||||
>
|
||||
<ChevronLeft size={16} />
|
||||
@@ -214,11 +243,11 @@ export default function CreateSplitPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 2: Pricing */}
|
||||
{/* Step 2: Pricing & Sizes */}
|
||||
{step === 2 && (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-black text-white">Preise festlegen</h1>
|
||||
<h1 className="text-2xl font-black text-white">Preise & Größen</h1>
|
||||
<p className="text-zinc-500 text-sm">{selectedBottle?.name}</p>
|
||||
</div>
|
||||
|
||||
@@ -256,40 +285,65 @@ export default function CreateSplitPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-xs font-bold text-zinc-500 block mb-2">Flasche 5cl (€)</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={costGlass5cl}
|
||||
onChange={e => setCostGlass5cl(e.target.value)}
|
||||
className="w-full bg-zinc-800 border border-zinc-700 rounded-xl px-4 py-3 text-white"
|
||||
/>
|
||||
{/* Sample Sizes */}
|
||||
<div className="space-y-3">
|
||||
<label className="text-xs font-bold text-zinc-500 uppercase tracking-widest">Verfügbare Größen</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{sampleSizes.map(size => (
|
||||
<div
|
||||
key={size.cl}
|
||||
className="flex items-center gap-2 px-3 py-2 bg-zinc-800 rounded-xl"
|
||||
>
|
||||
<span className="font-bold text-white">{size.cl}cl</span>
|
||||
<span className="text-zinc-500 text-xs">+{size.glassCost.toFixed(2)}€</span>
|
||||
<button
|
||||
onClick={() => removeSampleSize(size.cl)}
|
||||
className="text-red-500 hover:text-red-400 ml-1"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-bold text-zinc-500 block mb-2">Flasche 10cl (€)</label>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="number"
|
||||
value={newSizeCl}
|
||||
onChange={e => setNewSizeCl(e.target.value)}
|
||||
placeholder="cl"
|
||||
className="w-20 bg-zinc-800 border border-zinc-700 rounded-xl px-3 py-2 text-white text-sm"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={costGlass10cl}
|
||||
onChange={e => setCostGlass10cl(e.target.value)}
|
||||
className="w-full bg-zinc-800 border border-zinc-700 rounded-xl px-4 py-3 text-white"
|
||||
value={newSizeCost}
|
||||
onChange={e => setNewSizeCost(e.target.value)}
|
||||
placeholder="Glaskosten €"
|
||||
className="flex-1 bg-zinc-800 border border-zinc-700 rounded-xl px-3 py-2 text-white text-sm"
|
||||
/>
|
||||
<button
|
||||
onClick={addSampleSize}
|
||||
disabled={!newSizeCl || !newSizeCost}
|
||||
className="p-2 bg-zinc-700 hover:bg-zinc-600 disabled:opacity-50 rounded-xl transition-colors"
|
||||
>
|
||||
<Plus size={20} className="text-white" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
{priceBottle && (
|
||||
{priceBottle && sampleSizes.length > 0 && (
|
||||
<div className="bg-zinc-900 rounded-2xl p-4 border border-zinc-800">
|
||||
<p className="text-xs font-bold text-zinc-500 mb-2">Vorschau (inkl. Flasche)</p>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white">5cl Preis:</span>
|
||||
<span className="font-bold text-orange-500">{price5cl.toFixed(2)}€</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white">10cl Preis:</span>
|
||||
<span className="font-bold text-orange-500">{price10cl.toFixed(2)}€</span>
|
||||
<p className="text-xs font-bold text-zinc-500 mb-3">Vorschau (inkl. Flasche)</p>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{sampleSizes.map(size => (
|
||||
<div key={size.cl} className="flex justify-between text-sm">
|
||||
<span className="text-zinc-400">{size.cl}cl:</span>
|
||||
<span className="font-bold text-orange-500">
|
||||
{(pricePerCl * size.cl + size.glassCost).toFixed(2)}€
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -304,7 +358,7 @@ export default function CreateSplitPage() {
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setStep(3)}
|
||||
disabled={!priceBottle}
|
||||
disabled={!priceBottle || sampleSizes.length === 0}
|
||||
className="flex-1 py-4 bg-orange-600 hover:bg-orange-700 disabled:bg-zinc-800 disabled:text-zinc-600 text-white rounded-2xl font-bold flex items-center justify-center gap-2 transition-colors"
|
||||
>
|
||||
Weiter
|
||||
@@ -344,7 +398,6 @@ export default function CreateSplitPage() {
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Add new */}
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
|
||||
Reference in New Issue
Block a user