238 lines
11 KiB
TypeScript
238 lines
11 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
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 { Badge } from '@/components/ui/badge'
|
|
import {
|
|
CreditCard,
|
|
Calendar,
|
|
Check,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
RefreshCw,
|
|
ShoppingBag,
|
|
CheckCircle2,
|
|
} from 'lucide-react'
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
|
|
interface StepBillingProps {
|
|
selectedBillingInterval: 'one_time' | 'monthly'
|
|
handleBillingIntervalChange: (val: 'one_time' | 'monthly') => void
|
|
customerMode: 'select' | 'create'
|
|
selectedEndCustomerId: string | null
|
|
lastLicenseDate: string
|
|
setLastLicenseDate: (date: string) => void
|
|
prevStep: () => void
|
|
nextStep: () => void
|
|
}
|
|
|
|
export function StepBilling({
|
|
selectedBillingInterval,
|
|
handleBillingIntervalChange,
|
|
lastLicenseDate,
|
|
setLastLicenseDate,
|
|
prevStep,
|
|
nextStep,
|
|
}: StepBillingProps) {
|
|
const isOneTime = selectedBillingInterval === 'one_time'
|
|
const isMonthly = selectedBillingInterval === 'monthly'
|
|
|
|
return (
|
|
<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="py-2.5 px-4 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-lg font-bold flex items-center gap-2 text-white">
|
|
<CreditCard className="w-4 h-4 text-primary" />
|
|
Abrechnungsmodell wählen
|
|
</CardTitle>
|
|
<CardDescription className="text-[11px] 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-2.5 py-0.5">
|
|
Schritt 2 von 4
|
|
</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
{/* ─── 2. NO-SCROLL MIDDLE CONTENT (flex-1 flex flex-col justify-center items-center overflow-hidden p-4) ─── */}
|
|
<div className="flex-1 min-h-0 flex flex-col justify-center items-center overflow-hidden p-4 w-full">
|
|
<div className="max-w-3xl w-full grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
|
|
{/* Option 1: Miete / Abo */}
|
|
<div
|
|
onClick={() => handleBillingIntervalChange('monthly')}
|
|
className={`relative p-5 rounded-xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between 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>
|
|
<div className="flex items-center justify-between gap-3 mb-3">
|
|
<div className={`p-2.5 rounded-lg ${isMonthly ? 'bg-primary/20 text-primary border border-primary/30' : 'bg-white/5 text-slate-400 border border-white/10'}`}>
|
|
<RefreshCw className={`w-5 h-5 ${isMonthly ? 'animate-spin-slow' : ''}`} />
|
|
</div>
|
|
{isMonthly && (
|
|
<div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center text-white shadow-md shadow-primary/30">
|
|
<Check className="w-3 h-3" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-0.5">
|
|
<div className="flex items-center gap-2">
|
|
<h3 className="text-base font-bold text-white">Miete / Abo</h3>
|
|
<Badge variant="outline" className="text-[9px] px-1.5 py-0 bg-blue-500/10 border-blue-500/30 text-blue-400">
|
|
Empfohlen
|
|
</Badge>
|
|
</div>
|
|
<p className="text-[11px] font-medium text-slate-300">
|
|
Fortlaufende monatliche Abrechnung
|
|
</p>
|
|
</div>
|
|
|
|
<p className="text-slate-400 text-[11px] mt-2 leading-relaxed">
|
|
Maximale Flexibilität: Inklusive sämtlicher Software-Updates, Cloud-Dienste und Support. Jederzeit kündbar oder anpassbar.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-3 pt-2.5 border-t border-white/10 flex items-center justify-between text-[11px]">
|
|
<span className="text-slate-400">Zahlungsintervall:</span>
|
|
<span className="text-primary font-semibold">monatlich</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Option 2: Kauf / Einmalkauf (mit integrierter Inline-Erweiterung) */}
|
|
<div
|
|
onClick={() => handleBillingIntervalChange('one_time')}
|
|
className={`relative p-5 rounded-xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between 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-3">
|
|
<div className={`p-2.5 rounded-lg ${isOneTime ? 'bg-primary/20 text-primary border border-primary/30' : 'bg-white/5 text-slate-400 border border-white/10'}`}>
|
|
<ShoppingBag className="w-5 h-5" />
|
|
</div>
|
|
{isOneTime && (
|
|
<div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center text-white shadow-md shadow-primary/30">
|
|
<Check className="w-3 h-3" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-0.5">
|
|
<div className="flex items-center gap-2">
|
|
<h3 className="text-base font-bold text-white">Kauf / Einmalkauf</h3>
|
|
<Badge variant="outline" className="text-[9px] px-1.5 py-0 bg-slate-500/10 border-slate-500/30 text-slate-300">
|
|
Klassisch
|
|
</Badge>
|
|
</div>
|
|
<p className="text-[11px] font-medium text-slate-300">
|
|
Einmalige Lizenzgebühr
|
|
</p>
|
|
</div>
|
|
|
|
<p className="text-slate-400 text-[11px] mt-2 leading-relaxed">
|
|
Dauerhafte Lizenzrechte für die gekaufte Version inklusive 12 Monate kostenfreier Updates.
|
|
</p>
|
|
|
|
{/* Inline-Erweiterung für Kaufdatum / Stichtag */}
|
|
<AnimatePresence>
|
|
{isOneTime && (
|
|
<motion.div
|
|
initial={{ opacity: 0, height: 0, marginTop: 0 }}
|
|
animate={{ opacity: 1, height: 'auto', marginTop: 12 }}
|
|
exit={{ opacity: 0, height: 0, marginTop: 0 }}
|
|
transition={{ duration: 0.25, ease: 'easeInOut' }}
|
|
className="overflow-hidden"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="p-3 rounded-lg bg-slate-950/80 border border-white/10 space-y-2">
|
|
<div className="flex items-start gap-2">
|
|
<Calendar className="w-3.5 h-3.5 text-primary shrink-0 mt-0.5" />
|
|
<div className="space-y-0.5 flex-1">
|
|
<Label htmlFor="last-license-date" className="text-white text-[11px] font-bold block">
|
|
Datum letzter CASPOS-Kauf <span className="text-slate-400 font-normal">(optional)</span>
|
|
</Label>
|
|
<p className="text-[10px] text-slate-400 leading-tight">
|
|
Zur automatischen Berechnung der Update-Staffel (15% / 30% / 50%).
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<Input
|
|
id="last-license-date"
|
|
type="date"
|
|
value={lastLicenseDate}
|
|
onChange={(e) => setLastLicenseDate(e.target.value)}
|
|
className="bg-slate-900 border-white/10 text-white text-xs h-8 focus:border-primary w-full"
|
|
/>
|
|
</div>
|
|
|
|
{lastLicenseDate && (
|
|
<div className="text-[10px] text-emerald-400 flex items-center gap-1">
|
|
<CheckCircle2 className="w-3 h-3 text-emerald-400" /> Stichtag erfasst
|
|
</div>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
<div className="mt-3 pt-2.5 border-t border-white/10 flex items-center justify-between text-[11px]">
|
|
<span className="text-slate-400">Zahlungsintervall:</span>
|
|
<span className="text-slate-200 font-semibold">einmalig</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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-4 py-2.5 flex flex-col sm:flex-row items-center justify-between gap-2 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-8 text-xs gap-1.5"
|
|
>
|
|
<ChevronLeft className="w-3.5 h-3.5" /> Zurück zu Schritt 1
|
|
</Button>
|
|
|
|
{/* Selected Model Status Chip */}
|
|
<div className="flex items-center gap-2 px-2.5 py-1 rounded-lg 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 ${
|
|
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-5 shadow-md shadow-primary/20 h-8 text-xs gap-1.5"
|
|
>
|
|
Weiter zu Schritt 3 <ChevronRight className="w-3.5 h-3.5" />
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|
|
|