feat: rework order wizard to require one product per category with multi-selection
This commit is contained in:
DanielS
@@ -10,89 +10,154 @@ import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
|
||||
import { Check, ChevronRight, ChevronLeft, ShoppingCart, User, CreditCard, ShieldCheck, Cloud, Utensils, HardDrive, Package } from 'lucide-react'
|
||||
import { Check, ChevronRight, ChevronLeft, ShoppingCart, User, ShieldCheck, Cloud, Utensils, HardDrive, Package, AlertCircle } from 'lucide-react'
|
||||
import { submitOrder } from '@/lib/actions/orders'
|
||||
import { Category } from '@/lib/types'
|
||||
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
export function OrderWizard({ products, categories, initialProfile }: { products: Product[], categories: Category[], initialProfile: Profile | null }) {
|
||||
// ─── Types ────────────────────────────────────────────────────────────────────
|
||||
type CategorySelection = {
|
||||
productId: string | null // selected product in this category
|
||||
moduleIds: string[] // selected module IDs for this product
|
||||
}
|
||||
|
||||
// ─── Icon helper ──────────────────────────────────────────────────────────────
|
||||
function CategoryIcon({ icon, className }: { icon?: string | null; className?: string }) {
|
||||
const Icon = icon === 'Cloud' ? Cloud : icon === 'Utensils' ? Utensils : icon === 'HardDrive' ? HardDrive : Package
|
||||
return <Icon className={className} />
|
||||
}
|
||||
|
||||
// ─── Module toggle logic ───────────────────────────────────────────────────────
|
||||
function toggleModuleInList(
|
||||
modules: ProductModule[],
|
||||
currentIds: string[],
|
||||
toggleId: string
|
||||
): string[] {
|
||||
const isSelected = currentIds.includes(toggleId)
|
||||
if (isSelected) {
|
||||
const next = currentIds.filter(id => id !== toggleId)
|
||||
// cascade: remove modules that required this one
|
||||
return next.filter(mId => {
|
||||
const m = modules.find(mod => mod.id === mId)
|
||||
return !m?.requirements || m.requirements.every(reqId => next.includes(reqId) || reqId === toggleId)
|
||||
}).filter(id => id !== toggleId)
|
||||
} else {
|
||||
const module = modules.find(m => m.id === toggleId)
|
||||
if (module?.exclusions?.some(exId => currentIds.includes(exId))) return currentIds
|
||||
return [...currentIds, toggleId]
|
||||
}
|
||||
}
|
||||
|
||||
function isModuleDisabled(module: ProductModule, selectedModules: string[]): boolean {
|
||||
const requirementsMet = !module.requirements?.length ||
|
||||
module.requirements.every(reqId => selectedModules.includes(reqId))
|
||||
const isExcluded = module.exclusions?.some(exId => selectedModules.includes(exId))
|
||||
return !requirementsMet || !!isExcluded
|
||||
}
|
||||
|
||||
// ─── Main Wizard ──────────────────────────────────────────────────────────────
|
||||
export function OrderWizard({
|
||||
products,
|
||||
categories,
|
||||
initialProfile,
|
||||
}: {
|
||||
products: Product[]
|
||||
categories: Category[]
|
||||
initialProfile: Profile | null
|
||||
}) {
|
||||
const [step, setStep] = useState(1)
|
||||
const [activeCategory, setActiveCategory] = useState<string>(categories[0]?.id || 'all')
|
||||
const [customerData, setCustomerData] = useState<Partial<Profile>>(initialProfile || {
|
||||
const [customerData, setCustomerData] = useState<Partial<Profile>>(
|
||||
initialProfile || {
|
||||
company_name: '',
|
||||
vat_id: '',
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
address: '',
|
||||
city: '',
|
||||
zip_code: ''
|
||||
zip_code: '',
|
||||
}
|
||||
)
|
||||
|
||||
// Per-category selection map: categoryId -> { productId, moduleIds }
|
||||
const [selections, setSelections] = useState<Record<string, CategorySelection>>(() => {
|
||||
const init: Record<string, CategorySelection> = {}
|
||||
categories.forEach(cat => {
|
||||
const first = products.find(p => p.category_id === cat.id)
|
||||
init[cat.id] = { productId: first?.id ?? null, moduleIds: [] }
|
||||
})
|
||||
return init
|
||||
})
|
||||
|
||||
const filteredProducts = useMemo(() => {
|
||||
if (activeCategory === 'all') return products
|
||||
return products.filter(p => p.category_id === activeCategory)
|
||||
}, [products, activeCategory])
|
||||
|
||||
const [selectedProduct, setSelectedProduct] = useState<Product | null>(filteredProducts[0] || null)
|
||||
const [selectedModules, setSelectedModules] = useState<string[]>([])
|
||||
// All categories must have a product selected
|
||||
const allCategoriesFilled = useMemo(
|
||||
() => categories.every(cat => !!selections[cat.id]?.productId),
|
||||
[categories, selections]
|
||||
)
|
||||
|
||||
// Total price across all selections
|
||||
const totalPrice = useMemo(() => {
|
||||
if (!selectedProduct) return 0
|
||||
let total = Number(selectedProduct.base_price)
|
||||
selectedModules.forEach(modId => {
|
||||
const mod = selectedProduct.modules?.find(m => m.id === modId)
|
||||
let total = 0
|
||||
for (const cat of categories) {
|
||||
const sel = selections[cat.id]
|
||||
if (!sel?.productId) continue
|
||||
const prod = products.find(p => p.id === sel.productId)
|
||||
if (!prod) continue
|
||||
total += Number(prod.base_price)
|
||||
sel.moduleIds.forEach(mId => {
|
||||
const mod = prod.modules?.find(m => m.id === mId)
|
||||
if (mod) total += Number(mod.price)
|
||||
})
|
||||
}
|
||||
return total
|
||||
}, [selectedProduct, selectedModules])
|
||||
}, [selections, products, categories])
|
||||
|
||||
// Helper: update product selection for a category (resets modules)
|
||||
function selectProduct(catId: string, productId: string) {
|
||||
setSelections(prev => ({
|
||||
...prev,
|
||||
[catId]: { productId, moduleIds: [] },
|
||||
}))
|
||||
}
|
||||
|
||||
// Helper: toggle module for a category's selected product
|
||||
function toggleModule(catId: string, moduleId: string) {
|
||||
setSelections(prev => {
|
||||
const sel = prev[catId]
|
||||
if (!sel?.productId) return prev
|
||||
const prod = products.find(p => p.id === sel.productId)
|
||||
const newModuleIds = toggleModuleInList(prod?.modules ?? [], sel.moduleIds, moduleId)
|
||||
return { ...prev, [catId]: { ...sel, moduleIds: newModuleIds } }
|
||||
})
|
||||
}
|
||||
|
||||
const nextStep = () => setStep(s => s + 1)
|
||||
const prevStep = () => setStep(s => s - 1)
|
||||
|
||||
const toggleModule = (id: string) => {
|
||||
const module = selectedProduct?.modules?.find(m => m.id === id)
|
||||
if (!module) return
|
||||
|
||||
setSelectedModules(prev => {
|
||||
const isSelected = prev.includes(id)
|
||||
|
||||
if (isSelected) {
|
||||
// When deselecting, we might need to deselect others that depend on this one
|
||||
const newSelection = prev.filter(m => m !== id)
|
||||
return newSelection.filter(mId => {
|
||||
const m = selectedProduct?.modules?.find(mod => mod.id === mId)
|
||||
return !m?.requirements || m.requirements.every(reqId => newSelection.includes(reqId) || reqId === id)
|
||||
}).filter(mId => mId !== id)
|
||||
} else {
|
||||
// When selecting, check exclusions
|
||||
if (module.exclusions && module.exclusions.some(exId => prev.includes(exId))) {
|
||||
return prev // Should be disabled anyway, but safety check
|
||||
}
|
||||
return [...prev, id]
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
// Build multi-product order payload – submit each category item
|
||||
const items = categories
|
||||
.map(cat => {
|
||||
const sel = selections[cat.id]
|
||||
if (!sel?.productId) return null
|
||||
const prod = products.find(p => p.id === sel.productId)!
|
||||
return {
|
||||
category: cat.name,
|
||||
product_id: sel.productId,
|
||||
product_name: prod.name,
|
||||
base_price: prod.base_price,
|
||||
selected_modules: sel.moduleIds,
|
||||
}
|
||||
})
|
||||
}
|
||||
.filter(Boolean)
|
||||
|
||||
const isModuleDisabled = (module: ProductModule) => {
|
||||
// 1. Check requirements: all required modules must be selected
|
||||
const requirementsMet = !module.requirements || module.requirements.length === 0 ||
|
||||
module.requirements.every(reqId => selectedModules.includes(reqId))
|
||||
|
||||
// 2. Check exclusions: no excluded module must be selected
|
||||
const isExcluded = module.exclusions && module.exclusions.some(exId => selectedModules.includes(exId))
|
||||
|
||||
return !requirementsMet || isExcluded
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!selectedProduct) return
|
||||
try {
|
||||
await submitOrder({
|
||||
product_id: selectedProduct.id,
|
||||
selected_modules: selectedModules,
|
||||
product_id: items[0]!.product_id, // primary (first category)
|
||||
selected_modules: items.flatMap(i => i!.selected_modules),
|
||||
total_amount: totalPrice,
|
||||
customer_details: customerData
|
||||
customer_details: customerData,
|
||||
// @ts-ignore extended payload
|
||||
items,
|
||||
})
|
||||
alert('Bestellung erfolgreich aufgegeben!')
|
||||
window.location.href = '/'
|
||||
@@ -103,15 +168,17 @@ export function OrderWizard({ products, categories, initialProfile }: { products
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto py-12 px-4">
|
||||
<div className="max-w-5xl mx-auto py-12 px-4">
|
||||
{/* Progress Stepper */}
|
||||
<div className="flex justify-between mb-12 relative">
|
||||
<div className="absolute top-1/2 left-0 w-full h-0.5 bg-white/10 -translate-y-1/2 z-0" />
|
||||
{[1, 2, 3].map((s) => (
|
||||
{[1, 2, 3].map(s => (
|
||||
<div
|
||||
key={s}
|
||||
className={`relative z-10 w-10 h-10 rounded-full flex items-center justify-center transition-all duration-500 ${
|
||||
step >= s ? 'bg-primary text-white scale-110 shadow-[0_0_15px_rgba(var(--primary),0.5)]' : 'bg-slate-800 text-slate-400'
|
||||
step >= s
|
||||
? 'bg-primary text-white scale-110 shadow-[0_0_15px_rgba(59,130,246,0.5)]'
|
||||
: 'bg-slate-800 text-slate-400'
|
||||
}`}
|
||||
>
|
||||
{step > s ? <Check className="w-6 h-6" /> : s}
|
||||
@@ -120,6 +187,7 @@ export function OrderWizard({ products, categories, initialProfile }: { products
|
||||
</div>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
{/* ───── Step 1: Product Selection per Category ───── */}
|
||||
{step === 1 && (
|
||||
<motion.div
|
||||
key="step1"
|
||||
@@ -129,152 +197,211 @@ export function OrderWizard({ products, categories, initialProfile }: { products
|
||||
className="space-y-6"
|
||||
>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<div className="md:col-span-2 space-y-6">
|
||||
{/* Left: Category sections */}
|
||||
<div className="md:col-span-2 space-y-8">
|
||||
<Card className="glass-dark border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl flex items-center gap-2">
|
||||
<ShoppingCart className="w-6 h-6 text-primary" />
|
||||
Software wählen
|
||||
</CardTitle>
|
||||
<CardDescription>Wählen Sie Ihr Basispaket und optionale Erweiterungen.</CardDescription>
|
||||
<CardDescription className="text-slate-300">
|
||||
Wählen Sie pro Kategorie mindestens einen Artikel aus.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Category Tabs */}
|
||||
<div className="space-y-4">
|
||||
<Label className="text-sm font-medium text-muted-foreground uppercase tracking-wider">Kategorie</Label>
|
||||
<Tabs value={activeCategory} onValueChange={(val) => {
|
||||
setActiveCategory(val)
|
||||
// Auto-select first product in new category
|
||||
const firstInCat = products.find(p => val === 'all' || p.category_id === val)
|
||||
if (firstInCat) {
|
||||
setSelectedProduct(firstInCat)
|
||||
setSelectedModules([])
|
||||
}
|
||||
}}>
|
||||
<TabsList className="bg-white/5 border border-white/10 p-1 h-auto grid grid-cols-2 md:grid-cols-4 gap-2">
|
||||
<TabsTrigger value="all" className="data-[state=active]:bg-primary flex items-center gap-2 py-2">
|
||||
<Package className="w-4 h-4" /> Alle
|
||||
</TabsTrigger>
|
||||
{categories.map(cat => {
|
||||
const Icon = cat.icon === 'Cloud' ? Cloud : cat.icon === 'Utensils' ? Utensils : cat.icon === 'HardDrive' ? HardDrive : Package
|
||||
<CardContent className="space-y-8">
|
||||
{categories.map((cat, idx) => {
|
||||
const catProducts = products.filter(p => p.category_id === cat.id)
|
||||
const sel = selections[cat.id]
|
||||
const selectedProduct = catProducts.find(p => p.id === sel?.productId) ?? null
|
||||
|
||||
return (
|
||||
<TabsTrigger key={cat.id} value={cat.id} className="data-[state=active]:bg-primary flex items-center gap-2 py-2">
|
||||
<Icon className="w-4 h-4" /> {cat.name}
|
||||
</TabsTrigger>
|
||||
)
|
||||
})}
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
<div key={cat.id}>
|
||||
{idx > 0 && <Separator className="bg-white/10 mb-8" />}
|
||||
|
||||
{/* Category header */}
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center">
|
||||
<CategoryIcon icon={cat.icon} className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
|
||||
<Separator className="bg-white/10" />
|
||||
|
||||
<div className="space-y-4">
|
||||
<Label className="text-sm font-medium text-muted-foreground uppercase tracking-wider">Lösung</Label>
|
||||
<RadioGroup
|
||||
value={selectedProduct?.id}
|
||||
onValueChange={(id) => {
|
||||
const p = products.find(prod => prod.id === id)
|
||||
if (p) {
|
||||
setSelectedProduct(p)
|
||||
setSelectedModules([]) // Reset modules when product changes
|
||||
}
|
||||
}}
|
||||
className="grid gap-4"
|
||||
>
|
||||
{filteredProducts.map(product => (
|
||||
<div key={product.id} className="relative">
|
||||
<RadioGroupItem value={product.id} id={product.id} className="peer sr-only" />
|
||||
<Label
|
||||
htmlFor={product.id}
|
||||
className="flex flex-col items-start p-4 rounded-xl border-2 border-white/5 bg-white/5 hover:bg-white/10 peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5 cursor-pointer transition-all"
|
||||
>
|
||||
<div className="flex justify-between w-full items-center">
|
||||
<span className="font-bold text-lg">{product.name}</span>
|
||||
{product.category && (
|
||||
<Badge variant="outline" className="text-[10px] uppercase border-primary/30 text-primary">
|
||||
{product.category.name}
|
||||
<div>
|
||||
<h3 className="font-bold text-white text-lg">{cat.name}</h3>
|
||||
{cat.description && (
|
||||
<p className="text-slate-400 text-xs">{cat.description}</p>
|
||||
)}
|
||||
</div>
|
||||
{sel?.productId ? (
|
||||
<Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30">
|
||||
<Check className="w-3 h-3 mr-1" /> Ausgewählt
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="destructive" className="ml-auto opacity-80">
|
||||
<AlertCircle className="w-3 h-3 mr-1" /> Pflichtfeld
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-sm text-muted-foreground">{product.description}</span>
|
||||
<span className="mt-2 text-primary font-semibold">
|
||||
Ab {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(product.base_price)}
|
||||
|
||||
{catProducts.length === 0 ? (
|
||||
<p className="text-slate-500 text-sm italic">
|
||||
Keine Produkte in dieser Kategorie vorhanden.
|
||||
</p>
|
||||
) : (
|
||||
<RadioGroup
|
||||
value={sel?.productId ?? ''}
|
||||
onValueChange={id => selectProduct(cat.id, id)}
|
||||
className="grid gap-3"
|
||||
>
|
||||
{catProducts.map(product => (
|
||||
<div key={product.id} className="relative">
|
||||
<RadioGroupItem
|
||||
value={product.id}
|
||||
id={`${cat.id}-${product.id}`}
|
||||
className="peer sr-only"
|
||||
/>
|
||||
<Label
|
||||
htmlFor={`${cat.id}-${product.id}`}
|
||||
className="flex flex-col items-start p-4 rounded-xl border-2 border-white/5 bg-white/5 hover:bg-white/10 peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5 cursor-pointer transition-all"
|
||||
>
|
||||
<div className="flex justify-between w-full items-center">
|
||||
<span className="font-bold text-base text-white">{product.name}</span>
|
||||
<span className="text-primary font-semibold text-sm">
|
||||
{new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
}).format(product.base_price)}
|
||||
</span>
|
||||
</div>
|
||||
{product.description && (
|
||||
<span className="text-sm text-slate-300 mt-1">{product.description}</span>
|
||||
)}
|
||||
{product.modules && product.modules.length > 0 && (
|
||||
<span className="text-xs text-slate-500 mt-1">
|
||||
{product.modules.length} optionale Module verfügbar
|
||||
</span>
|
||||
)}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedProduct && selectedProduct.modules && selectedProduct.modules.length > 0 && (
|
||||
<div className="space-y-4 pt-4">
|
||||
<Label className="text-lg font-semibold">Zusatzmodule</Label>
|
||||
<div className="grid gap-3">
|
||||
{selectedProduct.modules.map(module => (
|
||||
{/* Modules for selected product in this category */}
|
||||
{selectedProduct?.modules && selectedProduct.modules.length > 0 && (
|
||||
<div className="mt-4 space-y-3 pl-2 border-l-2 border-primary/30">
|
||||
<p className="text-sm font-semibold text-white ml-2">Zusatzmodule:</p>
|
||||
{selectedProduct.modules.map(module => {
|
||||
const disabled = isModuleDisabled(module, sel?.moduleIds ?? [])
|
||||
const checked = sel?.moduleIds.includes(module.id) ?? false
|
||||
return (
|
||||
<div
|
||||
key={module.id}
|
||||
className="flex items-center space-x-3 p-3 rounded-lg border border-white/5 bg-white/5 hover:bg-white/10 transition-colors"
|
||||
className={`flex items-start space-x-3 p-3 rounded-lg border border-white/5 bg-white/5 ml-2 transition-colors ${disabled ? 'opacity-50' : 'hover:bg-white/10'}`}
|
||||
>
|
||||
<Checkbox
|
||||
id={module.id}
|
||||
checked={selectedModules.includes(module.id)}
|
||||
onCheckedChange={() => toggleModule(module.id)}
|
||||
disabled={isModuleDisabled(module)}
|
||||
id={`mod-${cat.id}-${module.id}`}
|
||||
checked={checked}
|
||||
onCheckedChange={() => toggleModule(cat.id, module.id)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<Label
|
||||
htmlFor={module.id}
|
||||
className={`font-medium cursor-pointer flex justify-between ${isModuleDisabled(module) ? 'opacity-50' : ''}`}
|
||||
htmlFor={`mod-${cat.id}-${module.id}`}
|
||||
className={`font-medium cursor-pointer flex justify-between text-white ${disabled ? 'cursor-not-allowed' : ''}`}
|
||||
>
|
||||
<span>{module.name}</span>
|
||||
<span className="text-primary">+{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(module.price)}</span>
|
||||
<span className="text-primary font-bold">
|
||||
+{new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
}).format(module.price)}
|
||||
</span>
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">{module.description}</p>
|
||||
{isModuleDisabled(module) && (
|
||||
{module.description && (
|
||||
<p className="text-xs text-slate-400">{module.description}</p>
|
||||
)}
|
||||
{disabled && (
|
||||
<p className="text-[10px] text-destructive mt-1">
|
||||
{module.requirements && module.requirements.some(reqId => !selectedModules.includes(reqId))
|
||||
? "Benötigt weitere Module"
|
||||
: "Nicht kombinierbar mit aktueller Auswahl"}
|
||||
{module.requirements?.some(
|
||||
reqId => !sel?.moduleIds.includes(reqId)
|
||||
)
|
||||
? 'Benötigt weitere Module'
|
||||
: 'Nicht kombinierbar mit aktueller Auswahl'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Right: Summary */}
|
||||
<div className="space-y-6">
|
||||
<Card className="glass-dark border-primary/20 sticky top-6">
|
||||
<CardHeader>
|
||||
<CardTitle>Zusammenfassung</CardTitle>
|
||||
<CardTitle className="text-white">Zusammenfassung</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">Basispreis:</span>
|
||||
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(selectedProduct?.base_price || 0)}</span>
|
||||
{categories.map(cat => {
|
||||
const sel = selections[cat.id]
|
||||
const prod = products.find(p => p.id === sel?.productId)
|
||||
if (!prod) return (
|
||||
<div key={cat.id} className="text-xs text-slate-500 italic flex items-center gap-1">
|
||||
<AlertCircle className="w-3 h-3 text-destructive" />
|
||||
{cat.name}: nicht gewählt
|
||||
</div>
|
||||
{selectedModules.map(modId => {
|
||||
const mod = selectedProduct?.modules?.find(m => m.id === modId)
|
||||
)
|
||||
return (
|
||||
<div key={modId} className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">{mod?.name}:</span>
|
||||
<span>+{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(mod?.price || 0)}</span>
|
||||
<div key={cat.id} className="space-y-1">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-slate-400 font-medium">{cat.name}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm pl-2">
|
||||
<span className="text-white">{prod.name}</span>
|
||||
<span className="text-white">
|
||||
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(prod.base_price)}
|
||||
</span>
|
||||
</div>
|
||||
{sel.moduleIds.map(mId => {
|
||||
const mod = prod.modules?.find(m => m.id === mId)
|
||||
return mod ? (
|
||||
<div key={mId} className="flex justify-between text-xs pl-4">
|
||||
<span className="text-slate-300">+ {mod.name}</span>
|
||||
<span className="text-slate-300">
|
||||
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(mod.price)}
|
||||
</span>
|
||||
</div>
|
||||
) : null
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<Separator className="bg-white/10" />
|
||||
<div className="flex justify-between text-xl font-bold text-gradient">
|
||||
<span>Gesamt:</span>
|
||||
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(totalPrice)}</span>
|
||||
<span>
|
||||
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(totalPrice)}
|
||||
</span>
|
||||
</div>
|
||||
{!allCategoriesFilled && (
|
||||
<p className="text-xs text-destructive flex items-center gap-1">
|
||||
<AlertCircle className="w-3 h-3" />
|
||||
Bitte aus jeder Kategorie einen Artikel wählen.
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button className="w-full h-12 text-lg" onClick={nextStep} disabled={!selectedProduct}>
|
||||
<Button
|
||||
className="w-full h-12 text-lg"
|
||||
onClick={nextStep}
|
||||
disabled={!allCategoriesFilled}
|
||||
>
|
||||
Weiter <ChevronRight className="ml-2 w-5 h-5" />
|
||||
</Button>
|
||||
</CardFooter>
|
||||
@@ -284,6 +411,7 @@ export function OrderWizard({ products, categories, initialProfile }: { products
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* ───── Step 2: Customer Data ───── */}
|
||||
{step === 2 && (
|
||||
<motion.div
|
||||
key="step2"
|
||||
@@ -298,67 +426,30 @@ export function OrderWizard({ products, categories, initialProfile }: { products
|
||||
<User className="w-6 h-6 text-primary" />
|
||||
Kundendaten
|
||||
</CardTitle>
|
||||
<CardDescription>Wir benötigen Ihre Daten für die Rechnungsstellung.</CardDescription>
|
||||
<CardDescription className="text-slate-300">
|
||||
Wir benötigen Ihre Daten für die Rechnungsstellung.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label>Firmenname</Label>
|
||||
{[
|
||||
{ label: 'Firmenname', key: 'company_name', placeholder: 'GmbH / Einzelunternehmen', span: false },
|
||||
{ label: 'USt-IdNr.', key: 'vat_id', placeholder: 'DE123456789', span: false },
|
||||
{ label: 'Vorname', key: 'first_name', placeholder: '', span: false },
|
||||
{ label: 'Nachname', key: 'last_name', placeholder: '', span: false },
|
||||
{ label: 'Straße & Hausnummer', key: 'address', placeholder: '', span: true },
|
||||
{ label: 'Postleitzahl', key: 'zip_code', placeholder: '', span: false },
|
||||
{ label: 'Ort', key: 'city', placeholder: '', span: false },
|
||||
].map(({ label, key, placeholder, span }) => (
|
||||
<div key={key} className={`space-y-2 ${span ? 'md:col-span-2' : ''}`}>
|
||||
<Label className="text-white">{label}</Label>
|
||||
<Input
|
||||
value={customerData.company_name || ''}
|
||||
onChange={(e) => setCustomerData({...customerData, company_name: e.target.value})}
|
||||
placeholder="GmbH / Einzelunternehmen"
|
||||
className="bg-white/5 border-white/10"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>USt-IdNr.</Label>
|
||||
<Input
|
||||
value={customerData.vat_id || ''}
|
||||
onChange={(e) => setCustomerData({...customerData, vat_id: e.target.value})}
|
||||
placeholder="DE123456789"
|
||||
className="bg-white/5 border-white/10"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Vorname</Label>
|
||||
<Input
|
||||
value={customerData.first_name || ''}
|
||||
onChange={(e) => setCustomerData({...customerData, first_name: e.target.value})}
|
||||
className="bg-white/5 border-white/10"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Nachname</Label>
|
||||
<Input
|
||||
value={customerData.last_name || ''}
|
||||
onChange={(e) => setCustomerData({...customerData, last_name: e.target.value})}
|
||||
className="bg-white/5 border-white/10"
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2 space-y-2">
|
||||
<Label>Straße & Hausnummer</Label>
|
||||
<Input
|
||||
value={customerData.address || ''}
|
||||
onChange={(e) => setCustomerData({...customerData, address: e.target.value})}
|
||||
className="bg-white/5 border-white/10"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Postleitzahl</Label>
|
||||
<Input
|
||||
value={customerData.zip_code || ''}
|
||||
onChange={(e) => setCustomerData({...customerData, zip_code: e.target.value})}
|
||||
className="bg-white/5 border-white/10"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Ort</Label>
|
||||
<Input
|
||||
value={customerData.city || ''}
|
||||
onChange={(e) => setCustomerData({...customerData, city: e.target.value})}
|
||||
className="bg-white/5 border-white/10"
|
||||
value={(customerData as any)[key] || ''}
|
||||
onChange={e => setCustomerData({ ...customerData, [key]: e.target.value })}
|
||||
placeholder={placeholder}
|
||||
className="bg-white/5 border-white/10 text-white placeholder:text-slate-500"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-between border-t border-white/10 pt-6">
|
||||
<Button variant="ghost" onClick={prevStep}>
|
||||
@@ -372,6 +463,7 @@ export function OrderWizard({ products, categories, initialProfile }: { products
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* ───── Step 3: Review & Submit ───── */}
|
||||
{step === 3 && (
|
||||
<motion.div
|
||||
key="step3"
|
||||
@@ -385,29 +477,72 @@ export function OrderWizard({ products, categories, initialProfile }: { products
|
||||
<div className="w-20 h-20 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4 border border-primary/50">
|
||||
<ShieldCheck className="w-10 h-10 text-primary" />
|
||||
</div>
|
||||
<CardTitle className="text-3xl">Bestellung prüfen</CardTitle>
|
||||
<CardDescription>Fast fertig! Bitte überprüfen Sie Ihre Auswahl.</CardDescription>
|
||||
<CardTitle className="text-3xl text-white">Bestellung prüfen</CardTitle>
|
||||
<CardDescription className="text-slate-300">
|
||||
Fast fertig! Bitte überprüfen Sie Ihre Auswahl.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6 text-left">
|
||||
<div className="p-4 rounded-lg bg-white/5 space-y-4">
|
||||
<div className="flex justify-between font-bold text-lg">
|
||||
<span>{selectedProduct?.name}</span>
|
||||
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(totalPrice)} / Monat</span>
|
||||
{categories.map(cat => {
|
||||
const sel = selections[cat.id]
|
||||
const prod = products.find(p => p.id === sel?.productId)
|
||||
if (!prod) return null
|
||||
const catTotal =
|
||||
Number(prod.base_price) +
|
||||
sel.moduleIds.reduce((acc, mId) => {
|
||||
const mod = prod.modules?.find(m => m.id === mId)
|
||||
return acc + Number(mod?.price ?? 0)
|
||||
}, 0)
|
||||
return (
|
||||
<div key={cat.id}>
|
||||
<div className="flex justify-between font-bold text-base text-white">
|
||||
<span className="flex items-center gap-2">
|
||||
<CategoryIcon icon={cat.icon} className="w-4 h-4 text-primary" />
|
||||
{prod.name}
|
||||
</span>
|
||||
<span>
|
||||
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(catTotal)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground space-y-1">
|
||||
<p>Inklusive: {selectedModules.length > 0 ? selectedModules.map(id => selectedProduct?.modules?.find(m => m.id === id)?.name).join(', ') : 'Keine Zusatzmodule'}</p>
|
||||
<Separator className="bg-white/10 my-2" />
|
||||
<p>{customerData.company_name}</p>
|
||||
<p>{customerData.address}, {customerData.zip_code} {customerData.city}</p>
|
||||
{sel.moduleIds.length > 0 && (
|
||||
<p className="text-sm text-slate-300 mt-1 pl-6">
|
||||
Module: {sel.moduleIds
|
||||
.map(id => prod.modules?.find(m => m.id === id)?.name)
|
||||
.filter(Boolean)
|
||||
.join(', ')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<Separator className="bg-white/10" />
|
||||
<div className="text-sm text-slate-300 space-y-1">
|
||||
<p className="font-semibold text-white">{customerData.company_name}</p>
|
||||
<p>
|
||||
{customerData.first_name} {customerData.last_name}
|
||||
</p>
|
||||
<p>
|
||||
{customerData.address}, {customerData.zip_code} {customerData.city}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-muted-foreground italic">
|
||||
Mit dem Klick auf "Kostenpflichtig bestellen" akzeptieren Sie unsere AGB und die Datenschutzerklärung.
|
||||
<div className="flex justify-between text-xl font-bold text-gradient">
|
||||
<span>Gesamtbetrag:</span>
|
||||
<span>
|
||||
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(totalPrice)} / Monat
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 italic">
|
||||
Mit dem Klick auf „Kostenpflichtig bestellen" akzeptieren Sie unsere AGB und die
|
||||
Datenschutzerklärung.
|
||||
</p>
|
||||
</CardContent>
|
||||
<CardFooter className="flex flex-col gap-4">
|
||||
<Button className="w-full h-14 text-xl font-bold bg-primary hover:bg-primary/90" onClick={handleSubmit}>
|
||||
<Button
|
||||
className="w-full h-14 text-xl font-bold bg-primary hover:bg-primary/90"
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Kostenpflichtig bestellen
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={prevStep} className="w-full">
|
||||
|
||||
Reference in New Issue
Block a user