Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(wizard): optimize ui ux with no-page-scroll and hub flow
All checks were successful
Staging Build / build (push) Successful in 3m16s
Details

Browse Source
This commit is contained in:
DanielS
2026-09-07 22:26:13 +02:00
parent 2a1897141e
commit 694e8dfbc1
6 changed files with 1523 additions and 1022 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
shop/components/wizard/step-billing.tsx
View File

@@ -1,11 +1,24 @@
'use client'
import React from 'react'
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
import { Card, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { CreditCard, Calendar, Check, ChevronLeft, ChevronRight } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import {
CreditCard,
Calendar,
Check,
ChevronLeft,
ChevronRight,
RefreshCw,
ShoppingBag,
ShieldCheck,
CheckCircle2,
Info,
} from 'lucide-react'
import { motion, AnimatePresence } from 'framer-motion'
interface StepBillingProps {
selectedBillingInterval: 'one_time' | 'monthly'
@@ -28,105 +41,207 @@ export function StepBilling({
prevStep,
nextStep,
}: StepBillingProps) {
// Optionale Validierung falls Datum bei Kauf Pflicht wäre, oder prüfen ob Modell gewählt ist
const isOneTime = selectedBillingInterval === 'one_time'
const isMonthly = selectedBillingInterval === 'monthly'
return (
<Card className="glass-dark border-white/10">
<CardHeader>
<CardTitle className="text-2xl flex items-center gap-2 text-white">
<CreditCard className="w-6 h-6 text-primary" />
Abrechnungsmodell wählen
</CardTitle>
<CardDescription className="text-slate-300">
Möchten Sie Lizenzen dauerhaft kaufen oder monatlich mieten?
</CardDescription>
<Card className="glass-dark border-white/10 h-[calc(100vh-8.5rem)] flex flex-col justify-between overflow-hidden relative">
{/* ─── 1. FIXED HEADER (shrink-0) ─── */}
<CardHeader className="pb-3 pt-4 px-6 shrink-0 border-b border-white/10 bg-slate-950/40 space-y-0">
<div className="flex items-center justify-between gap-3">
<div>
<CardTitle className="text-xl font-bold flex items-center gap-2 text-white">
<CreditCard className="w-5 h-5 text-primary" />
Abrechnungsmodell wählen
</CardTitle>
<CardDescription className="text-xs text-slate-300 mt-0.5">
Wählen Sie zwischen monatlicher Miete (Abonnement) oder einmaligem Softwarekauf.
</CardDescription>
</div>
<Badge variant="outline" className="border-primary/30 text-primary bg-primary/10 text-xs px-3 py-1">
Schritt 2 von 4
</Badge>
</div>
</CardHeader>
<CardContent>
<div className="grid md:grid-cols-2 gap-6 py-4">
{/* Option 1: Kauf */}
<div
onClick={() => handleBillingIntervalChange('one_time')}
className={`relative p-6 rounded-2xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between min-h-[12rem] h-auto hover:shadow-[0_0_20px_rgba(255,255,255,0.05)] ${selectedBillingInterval === 'one_time'
? 'border-primary bg-primary/10 shadow-[0_0_25px_rgba(59,130,246,0.2)]'
: 'border-white/5 bg-white/5 hover:border-white/20'
{/* ─── 2. SCROLLABLE MIDDLE CONTENT (flex-1 min-h-0 overflow-y-auto) ─── */}
<div className="flex-1 min-h-0 overflow-y-auto p-6 flex flex-col justify-center max-w-4xl mx-auto w-full scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
<div className="space-y-6 my-auto">
{/* Abrechnungsmodell Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
{/* Option 1: Miete / Abo */}
<div
onClick={() => handleBillingIntervalChange('monthly')}
className={`relative p-6 rounded-2xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between min-h-[14rem] select-none ${
isMonthly
? 'border-primary bg-primary/10 shadow-[0_0_20px_rgba(59,130,246,0.2)] ring-1 ring-primary/50'
: 'border-white/5 bg-white/5 hover:border-white/20 hover:bg-white/[0.07]'
}`}
>
<div className="flex flex-col justify-between h-full">
>
<div>
<div className="flex items-center gap-3 mb-3">
<div className={`p-3 rounded-xl ${selectedBillingInterval === 'one_time' ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400'}`}>
<CreditCard className="w-6 h-6" />
<div className="flex items-center justify-between gap-3 mb-4">
<div className={`p-3.5 rounded-xl ${isMonthly ? 'bg-primary/20 text-primary border border-primary/30' : 'bg-white/5 text-slate-400 border border-white/10'}`}>
<RefreshCw className={`w-6 h-6 ${isMonthly ? 'animate-spin-slow' : ''}`} />
</div>
<h3 className="text-lg font-bold text-white">Einmaliger Kauf</h3>
{isMonthly && (
<div className="w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white shadow-md shadow-primary/30">
<Check className="w-3.5 h-3.5" />
</div>
)}
</div>
<p className="text-slate-400 text-sm">
Einmalige Anschaffungskosten für die Softwarelizenz. Keine monatlichen Mietgebühren.
<div className="space-y-1">
<div className="flex items-center gap-2">
<h3 className="text-lg font-bold text-white">Miete / Abo</h3>
<Badge variant="outline" className="text-[10px] bg-blue-500/10 border-blue-500/30 text-blue-400">
Empfohlen
</Badge>
</div>
<p className="text-xs font-medium text-slate-300">
Fortlaufende monatliche Abrechnung
</p>
</div>
<p className="text-slate-400 text-xs mt-3 leading-relaxed">
Maximale Flexibilität: Inklusive sämtlicher Software-Updates, Cloud-Dienste und technischem Support. Jederzeit kündbar oder anpassbar.
</p>
</div>
{selectedBillingInterval === 'one_time' && (
<div className="absolute top-4 right-4 w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white">
<Check className="w-4 h-4" />
</div>
)}
<div className="mt-4 pt-3 border-t border-white/10 flex items-center justify-between text-xs">
<span className="text-slate-400">Zahlungsintervall:</span>
<span className="text-primary font-semibold">monatlich</span>
</div>
</div>
{selectedBillingInterval === 'one_time' && customerMode === 'select' && selectedEndCustomerId && (
<div
onClick={(e) => e.stopPropagation()}
className="mt-4 pt-4 border-t border-white/5 space-y-2 cursor-default"
>
<Label htmlFor="last-license-date" className="text-white text-xs font-medium flex items-center gap-2">
<Calendar className="w-3.5 h-3.5 text-primary" />
Datum der letzten CASPOS-Lizenz
</Label>
<Input
id="last-license-date"
type="date"
value={lastLicenseDate}
onChange={e => setLastLicenseDate(e.target.value)}
className="bg-[#0b1329] border-white/10 text-white text-xs h-8 focus:border-primary"
/>
<p className="text-[10px] text-slate-500">
Ermöglicht automatische Ermittlung von Update-Gebühren.
{/* Option 2: Kauf / Einmalkauf */}
<div
onClick={() => handleBillingIntervalChange('one_time')}
className={`relative p-6 rounded-2xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between min-h-[14rem] select-none ${
isOneTime
? 'border-primary bg-primary/10 shadow-[0_0_20px_rgba(59,130,246,0.2)] ring-1 ring-primary/50'
: 'border-white/5 bg-white/5 hover:border-white/20 hover:bg-white/[0.07]'
}`}
>
<div>
<div className="flex items-center justify-between gap-3 mb-4">
<div className={`p-3.5 rounded-xl ${isOneTime ? 'bg-primary/20 text-primary border border-primary/30' : 'bg-white/5 text-slate-400 border border-white/10'}`}>
<ShoppingBag className="w-6 h-6" />
</div>
{isOneTime && (
<div className="w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white shadow-md shadow-primary/30">
<Check className="w-3.5 h-3.5" />
</div>
)}
</div>
<div className="space-y-1">
<div className="flex items-center gap-2">
<h3 className="text-lg font-bold text-white">Kauf / Einmalkauf</h3>
<Badge variant="outline" className="text-[10px] bg-slate-500/10 border-slate-500/30 text-slate-300">
Klassisch
</Badge>
</div>
<p className="text-xs font-medium text-slate-300">
Einmalige Lizenzgebühr
</p>
</div>
)}
<p className="text-slate-400 text-xs mt-3 leading-relaxed">
Dauerhafte Lizenzrechte für die gekaufte Version inklusive 12 Monate kostenfreier Updates. Keine laufenden monatlichen Mietgebühren.
</p>
</div>
<div className="mt-4 pt-3 border-t border-white/10 flex items-center justify-between text-xs">
<span className="text-slate-400">Zahlungsintervall:</span>
<span className="text-slate-200 font-semibold">einmalig</span>
</div>
</div>
</div>
{/* Option 2: Abo */}
<div
onClick={() => handleBillingIntervalChange('monthly')}
className={`relative p-6 rounded-2xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between min-h-[12rem] h-auto hover:shadow-[0_0_20px_rgba(255,255,255,0.05)] ${selectedBillingInterval === 'monthly'
? 'border-primary bg-primary/10 shadow-[0_0_25px_rgba(59,130,246,0.2)]'
: 'border-white/5 bg-white/5 hover:border-white/20'
}`}
>
<div>
<div className="flex items-center gap-3 mb-3">
<div className={`p-3 rounded-xl ${selectedBillingInterval === 'monthly' ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400'}`}>
<Calendar className="w-6 h-6" />
{/* Dynamische Stichtagsabfrage bei Kauf */}
<AnimatePresence>
{isOneTime && (
<motion.div
initial={{ opacity: 0, y: 10, height: 0 }}
animate={{ opacity: 1, y: 0, height: 'auto' }}
exit={{ opacity: 0, y: -10, height: 0 }}
transition={{ duration: 0.25 }}
className="overflow-hidden"
>
<div className="p-5 rounded-2xl bg-gradient-to-r from-slate-900/90 to-slate-900/60 border border-white/10 space-y-3 shadow-lg">
<div className="flex items-start gap-3">
<div className="p-2.5 rounded-xl bg-primary/20 text-primary border border-primary/30 shrink-0 mt-0.5">
<Calendar className="w-4 h-4" />
</div>
<div className="space-y-1 flex-1">
<Label htmlFor="last-license-date" className="text-white text-xs font-bold flex items-center gap-2">
Datum des letzten CASPOS-Kaufs (Stichtag)
</Label>
<p className="text-[11px] text-slate-400 leading-normal">
Datum des letzten Kaufs zur automatischen Berechnung der Update-Staffel (z. B. 15% innerhalb 1 Jahr, 30% bis 2 Jahre, 50% bis 3 Jahre).
</p>
</div>
</div>
<div className="pt-2 flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
<div className="relative flex-1 max-w-sm">
<Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
<Input
id="last-license-date"
type="date"
value={lastLicenseDate}
onChange={(e) => setLastLicenseDate(e.target.value)}
className="pl-9 bg-slate-950/80 border-white/10 text-white text-xs h-9 focus:border-primary"
/>
</div>
{lastLicenseDate && (
<Badge variant="outline" className="bg-emerald-500/10 border-emerald-500/30 text-emerald-400 text-xs px-2.5 py-1 flex items-center gap-1.5 self-start sm:self-auto">
<CheckCircle2 className="w-3.5 h-3.5" /> Stichtag gesetzt
</Badge>
)}
</div>
</div>
<h3 className="text-lg font-bold text-white">Monatliches Abo (Miete)</h3>
</div>
<p className="text-slate-400 text-sm">
Laufende monatliche Gebühren. Inklusive aller Updates und flexibler Laufzeit.
</p>
</div>
{selectedBillingInterval === 'monthly' && (
<div className="absolute top-4 right-4 w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white">
<Check className="w-4 h-4" />
</div>
</motion.div>
)}
</div>
</AnimatePresence>
</div>
</CardContent>
<CardFooter className="flex justify-between border-t border-white/10 pt-6">
<Button variant="ghost" className="text-white" onClick={prevStep}>
<ChevronLeft className="mr-2 w-4 h-4" /> Zurück
</div>
{/* ─── 3. FIXED BOTTOM ACTION BAR (shrink-0) ─── */}
<div className="shrink-0 border-t border-white/10 bg-slate-950/90 backdrop-blur-md px-6 py-3.5 flex flex-col sm:flex-row items-center justify-between gap-3 z-10">
{/* Back Button */}
<Button
variant="outline"
onClick={prevStep}
className="w-full sm:w-auto border-white/10 text-white hover:bg-white/10 h-9 text-xs gap-1.5"
>
<ChevronLeft className="w-4 h-4" /> Zurück zu Schritt 1
</Button>
<Button onClick={nextStep}>
Weiter zur Software <ChevronRight className="ml-2 w-4 h-4" />
{/* Selected Model Status Chip */}
<div className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-white/5 border border-white/10 text-white text-xs">
<span className="text-slate-400">Gewähltes Modell:</span>
<Badge
variant="outline"
className={`text-xs px-2 py-0.5 ${
isMonthly
? 'border-blue-500/30 text-blue-400 bg-blue-500/10'
: 'border-slate-500/30 text-slate-300 bg-slate-500/10'
}`}
>
{isMonthly ? 'Monatliches Abo' : 'Einmaliger Kauf'}
</Badge>
</div>
{/* Next Button */}
<Button
onClick={nextStep}
className="w-full sm:w-auto bg-primary hover:bg-primary/90 text-white font-semibold px-6 shadow-lg shadow-primary/20 h-9 text-xs gap-1.5"
>
Weiter zu Schritt 3 <ChevronRight className="w-4 h-4" />
</Button>
</CardFooter>
</div>
</Card>
)
}