334 lines
15 KiB
TypeScript
334 lines
15 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useMemo } from 'react'
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
import { Product, ProductModule, Profile } from '@/lib/types'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from '@/components/ui/card'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Checkbox } from '@/components/ui/checkbox'
|
|
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 } from 'lucide-react'
|
|
import { submitOrder } from '@/lib/actions/orders'
|
|
|
|
export function OrderWizard({ products, initialProfile }: { products: Product[], initialProfile: Profile | null }) {
|
|
const [step, setStep] = useState(1)
|
|
const [selectedProduct, setSelectedProduct] = useState<Product | null>(products[0] || null)
|
|
const [selectedModules, setSelectedModules] = useState<string[]>([])
|
|
const [customerData, setCustomerData] = useState<Partial<Profile>>(initialProfile || {
|
|
company_name: '',
|
|
vat_id: '',
|
|
first_name: '',
|
|
last_name: '',
|
|
address: '',
|
|
city: '',
|
|
zip_code: ''
|
|
})
|
|
|
|
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)
|
|
if (mod) total += Number(mod.additional_price)
|
|
})
|
|
return total
|
|
}, [selectedProduct, selectedModules])
|
|
|
|
const nextStep = () => setStep(s => s + 1)
|
|
const prevStep = () => setStep(s => s - 1)
|
|
|
|
const toggleModule = (id: string) => {
|
|
setSelectedModules(prev =>
|
|
prev.includes(id) ? prev.filter(m => m !== id) : [...prev, id]
|
|
)
|
|
}
|
|
|
|
const handleSubmit = async () => {
|
|
if (!selectedProduct) return
|
|
try {
|
|
await submitOrder({
|
|
product_id: selectedProduct.id,
|
|
selected_modules: selectedModules,
|
|
total_amount: totalPrice,
|
|
customer_details: customerData
|
|
})
|
|
alert('Bestellung erfolgreich aufgegeben!')
|
|
window.location.href = '/'
|
|
} catch (error) {
|
|
console.error(error)
|
|
alert('Fehler bei der Bestellung.')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-4xl 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) => (
|
|
<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 ? <Check className="w-6 h-6" /> : s}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<AnimatePresence mode="wait">
|
|
{step === 1 && (
|
|
<motion.div
|
|
key="step1"
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: -20 }}
|
|
className="space-y-6"
|
|
>
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
<div className="md:col-span-2 space-y-6">
|
|
<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>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<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"
|
|
>
|
|
{products.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"
|
|
>
|
|
<span className="font-bold text-lg">{product.name}</span>
|
|
<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)}
|
|
</span>
|
|
</Label>
|
|
</div>
|
|
))}
|
|
</RadioGroup>
|
|
|
|
{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 => (
|
|
<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"
|
|
>
|
|
<Checkbox
|
|
id={module.id}
|
|
checked={selectedModules.includes(module.id)}
|
|
onCheckedChange={() => toggleModule(module.id)}
|
|
/>
|
|
<div className="flex-1">
|
|
<Label htmlFor={module.id} className="font-medium cursor-pointer flex justify-between">
|
|
<span>{module.name}</span>
|
|
<span className="text-primary">+{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(module.additional_price)}</span>
|
|
</Label>
|
|
<p className="text-xs text-muted-foreground">{module.description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<Card className="glass-dark border-primary/20 sticky top-6">
|
|
<CardHeader>
|
|
<CardTitle>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>
|
|
</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?.additional_price || 0)}</span>
|
|
</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>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button className="w-full h-12 text-lg" onClick={nextStep} disabled={!selectedProduct}>
|
|
Weiter <ChevronRight className="ml-2 w-5 h-5" />
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{step === 2 && (
|
|
<motion.div
|
|
key="step2"
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: -20 }}
|
|
className="space-y-6"
|
|
>
|
|
<Card className="glass-dark border-white/10">
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl flex items-center gap-2">
|
|
<User className="w-6 h-6 text-primary" />
|
|
Kundendaten
|
|
</CardTitle>
|
|
<CardDescription>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>
|
|
<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"
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter className="flex justify-between border-t border-white/10 pt-6">
|
|
<Button variant="ghost" onClick={prevStep}>
|
|
<ChevronLeft className="mr-2 w-4 h-4" /> Zurück
|
|
</Button>
|
|
<Button onClick={nextStep}>
|
|
Prüfung & Abschluss <ChevronRight className="ml-2 w-4 h-4" />
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</motion.div>
|
|
)}
|
|
|
|
{step === 3 && (
|
|
<motion.div
|
|
key="step3"
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 0.95 }}
|
|
className="space-y-6 text-center"
|
|
>
|
|
<Card className="glass-dark border-primary/30 max-w-2xl mx-auto shadow-primary/10 shadow-2xl">
|
|
<CardHeader>
|
|
<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>
|
|
</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>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-xs text-muted-foreground 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}>
|
|
Kostenpflichtig bestellen
|
|
</Button>
|
|
<Button variant="ghost" onClick={prevStep} className="w-full">
|
|
Noch etwas ändern
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
)
|
|
}
|