feat(wizard): fix step 3 layout scrolling and add step 4 confirmation modal
This commit is contained in:
DanielS
@@ -940,11 +940,11 @@ export function OrderWizard({
|
||||
|
||||
{/* Step 3 Categories inside left sidebar */}
|
||||
{step === 3 && (
|
||||
<div className="pt-4 border-t border-white/10 space-y-3">
|
||||
<h3 className="text-xs font-bold uppercase tracking-wider text-slate-400">
|
||||
<div className="pt-3 border-t border-white/10 flex flex-col min-h-0 max-h-[calc(100vh-22rem)] overflow-hidden">
|
||||
<h3 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-2 shrink-0">
|
||||
Kategorien
|
||||
</h3>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex flex-col gap-1.5 flex-1 min-h-0 overflow-y-auto pr-1 pb-2 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
|
||||
{visibleCategories.map((cat) => {
|
||||
const sel = selections[cat.id]
|
||||
const hasSelection = (sel?.productIds && sel.productIds.length > 0) || !!sel?.productId
|
||||
@@ -956,7 +956,7 @@ export function OrderWizard({
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => setActiveCategoryId(cat.id)}
|
||||
className={`flex items-center gap-2.5 p-2.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${
|
||||
className={`flex items-center gap-2 p-2 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group shrink-0 ${
|
||||
isMissingRequired
|
||||
? 'bg-red-500/10 border-red-500/50 text-red-400 font-bold'
|
||||
: isActive
|
||||
@@ -968,7 +968,7 @@ export function OrderWizard({
|
||||
<div className="absolute left-0 top-0 bottom-0 w-1 bg-primary" />
|
||||
)}
|
||||
|
||||
<div className={`p-1.5 rounded-lg transition-colors ${
|
||||
<div className={`p-1.5 rounded-lg transition-colors shrink-0 ${
|
||||
isMissingRequired
|
||||
? 'bg-red-500/20 text-red-400'
|
||||
: isActive
|
||||
@@ -995,7 +995,7 @@ export function OrderWizard({
|
||||
✓
|
||||
</span>
|
||||
) : isRequired ? (
|
||||
<span className="text-[9px] px-2 py-0.5 rounded-full font-extrabold shrink-0 border border-red-500 text-red-400 bg-red-500/20 animate-pulse tracking-wider">
|
||||
<span className="text-[9px] px-1.5 py-0.2 rounded-full font-extrabold shrink-0 border border-red-500 text-red-400 bg-red-500/20 animate-pulse tracking-wider">
|
||||
FEHLT!
|
||||
</span>
|
||||
) : null}
|
||||
|
||||
@@ -73,19 +73,19 @@ export function StepSoftware({
|
||||
const selectedProduct = catProducts.find(p => p.id === sel?.productId) ?? null
|
||||
|
||||
return (
|
||||
<Card className="glass-dark border-white/10 h-full flex flex-col rounded-2xl overflow-hidden">
|
||||
{/* ─── FIXED CARD HEADER ─── */}
|
||||
<CardHeader className="border-b border-white/10 pb-3 pt-4 px-5 shrink-0 bg-slate-950/40">
|
||||
<Card className="glass-dark border-white/10 h-full flex flex-col rounded-2xl overflow-hidden min-h-0">
|
||||
{/* ─── FIXED CARD HEADER (shrink-0 mb-1) ─── */}
|
||||
<CardHeader className="border-b border-white/10 py-2.5 px-4 shrink-0 bg-slate-950/40">
|
||||
<div className="flex items-center justify-between gap-3 flex-wrap">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="p-2 rounded-xl bg-primary/20 text-primary border border-primary/30">
|
||||
<div className="p-1.5 rounded-lg bg-primary/20 text-primary border border-primary/30 shrink-0">
|
||||
<ShoppingCart className="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-base font-bold text-white">
|
||||
<CardTitle className="text-sm font-bold text-white leading-tight">
|
||||
{currentCategory.name}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-xs text-slate-400 mt-0.5">
|
||||
<CardDescription className="text-[11px] text-slate-400 mt-0.5 leading-tight">
|
||||
{currentCategory.description || 'Passen Sie die Konfiguration für diese Kategorie an.'}
|
||||
</CardDescription>
|
||||
</div>
|
||||
@@ -93,17 +93,17 @@ export function StepSoftware({
|
||||
|
||||
{editingDeviceName && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge className="bg-amber-500/20 text-amber-400 border border-amber-500/30 text-xs font-bold gap-1.5 px-3 py-1 rounded-lg animate-pulse shrink-0">
|
||||
✏️ Bearbeite Kasse: "{editingDeviceName}"
|
||||
<Badge className="bg-amber-500/20 text-amber-400 border border-amber-500/30 text-xs font-bold gap-1.5 px-2.5 py-0.5 rounded-lg animate-pulse shrink-0">
|
||||
✏️ Kasse: "{editingDeviceName}"
|
||||
</Badge>
|
||||
{onCancelEdit && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={onCancelEdit}
|
||||
className="h-7 text-xs text-slate-400 hover:text-white hover:bg-white/10 px-2"
|
||||
className="h-6 text-[11px] text-slate-400 hover:text-white hover:bg-white/10 px-2"
|
||||
>
|
||||
<X className="w-3.5 h-3.5 mr-1" /> Neuer Entwurf
|
||||
<X className="w-3 h-3 mr-1" /> Neuer Entwurf
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
@@ -111,8 +111,8 @@ export function StepSoftware({
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
{/* ─── CONTENT AREA (Inherits scrolling from parent, no nested double scrollbar) ─── */}
|
||||
<CardContent className="p-5 space-y-5">
|
||||
{/* ─── SCROLLABLE CONTENT AREA (flex-1 min-h-0 min-w-0 overflow-y-auto pr-3 pb-12) ─── */}
|
||||
<div className="flex-1 min-h-0 min-w-0 overflow-y-auto p-4 pr-3 pb-12 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={currentCategory.id}
|
||||
@@ -120,49 +120,49 @@ export function StepSoftware({
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="space-y-5"
|
||||
className="space-y-4 min-w-0"
|
||||
>
|
||||
{/* Category selection status header */}
|
||||
{(() => {
|
||||
const isMissingRequired = currentCategory.is_required && !sel?.productId && (!sel?.productIds || sel.productIds.length === 0)
|
||||
return (
|
||||
<div className={`flex items-center gap-3 p-3.5 rounded-xl border transition-all ${
|
||||
<div className={`flex items-center gap-3 p-3 rounded-xl border transition-all ${
|
||||
isMissingRequired
|
||||
? 'bg-red-500/10 border-red-500/50 text-red-400 font-bold'
|
||||
: 'bg-white/5 border-white/10'
|
||||
}`}>
|
||||
<div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${
|
||||
<div className={`w-7 h-7 rounded-lg flex items-center justify-center shrink-0 ${
|
||||
isMissingRequired ? 'bg-red-500/20 text-red-400' : 'bg-primary/20 text-primary'
|
||||
}`}>
|
||||
<CategoryIcon icon={currentCategory.icon} className="w-4 h-4" />
|
||||
<CategoryIcon icon={currentCategory.icon} className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="font-bold text-white text-xs flex items-center gap-2 flex-wrap">
|
||||
<span>{currentCategory.name}</span>
|
||||
{isMissingRequired && (
|
||||
<span className="text-[10px] bg-red-500/20 text-red-400 border border-red-500/40 px-2 py-0.5 rounded-full font-extrabold animate-pulse tracking-wider">
|
||||
<span className="text-[10px] bg-red-500/20 text-red-400 border border-red-500/40 px-2 py-0.2 rounded-full font-extrabold animate-pulse tracking-wider">
|
||||
PFLICHTFELD AUSWÄHLEN!
|
||||
</span>
|
||||
)}
|
||||
</h3>
|
||||
<p className="text-slate-400 text-[11px] mt-0.5">
|
||||
<p className="text-slate-400 text-[10px] mt-0.5">
|
||||
{currentCategory.allow_multiselect ? 'Mehrfachauswahl möglich' : 'Einzelauswahl'}
|
||||
</p>
|
||||
</div>
|
||||
{sel?.productIds && sel.productIds.length > 0 ? (
|
||||
<Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs rounded-full shrink-0">
|
||||
<Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-[11px] rounded-full shrink-0">
|
||||
<Check className="w-3 h-3 mr-1" /> {sel.productIds.length} Ausgewählt
|
||||
</Badge>
|
||||
) : sel?.productId ? (
|
||||
<Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs rounded-full shrink-0">
|
||||
<Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-[11px] rounded-full shrink-0">
|
||||
<Check className="w-3 h-3 mr-1" /> Ausgewählt
|
||||
</Badge>
|
||||
) : currentCategory.is_required ? (
|
||||
<Badge variant="destructive" className="ml-auto opacity-90 text-xs rounded-full bg-red-500/30 text-red-400 border border-red-500/50 animate-pulse font-extrabold shrink-0">
|
||||
<Badge variant="destructive" className="ml-auto opacity-90 text-[11px] rounded-full bg-red-500/30 text-red-400 border border-red-500/50 animate-pulse font-extrabold shrink-0">
|
||||
<AlertCircle className="w-3 h-3 mr-1 text-red-400" /> Bitte auswählen!
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="ml-auto border-white/10 text-slate-400 text-xs rounded-full bg-white/5 shrink-0">
|
||||
<Badge variant="outline" className="ml-auto border-white/10 text-slate-400 text-[11px] rounded-full bg-white/5 shrink-0">
|
||||
Optional
|
||||
</Badge>
|
||||
)}
|
||||
@@ -170,53 +170,57 @@ export function StepSoftware({
|
||||
)
|
||||
})()}
|
||||
|
||||
{/* Products List */}
|
||||
{/* Products List (grid-cols-1 xl:grid-cols-2 gap-3) */}
|
||||
{catProducts.length === 0 ? (
|
||||
<p className="text-slate-500 text-xs italic p-4 bg-white/5 rounded-xl border border-white/5 text-center">
|
||||
Keine Produkte in dieser Kategorie im aktuellen Abrechnungsmodell vorhanden.
|
||||
</p>
|
||||
) : currentCategory.allow_multiselect ? (
|
||||
<div className="grid gap-2.5">
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-3">
|
||||
{catProducts.map(product => {
|
||||
const isChecked = sel?.productIds?.includes(product.id) ?? false
|
||||
const disabled = isProductDisabled(product, currentCategory.id)
|
||||
return (
|
||||
<div key={product.id} className="relative">
|
||||
<div key={product.id} className="relative min-w-0">
|
||||
<Label
|
||||
onClick={() => !disabled && selectProduct(currentCategory.id, product.id)}
|
||||
className={`flex flex-col items-start p-3.5 rounded-xl border transition-all ${disabled
|
||||
className={`flex flex-col justify-between h-full p-3 rounded-xl border transition-all ${disabled
|
||||
? 'border-white/5 bg-white/5 opacity-40 cursor-not-allowed'
|
||||
: isChecked
|
||||
? 'border-primary bg-primary/10 cursor-pointer shadow-[0_0_15px_rgba(59,130,246,0.15)] ring-1 ring-primary/40'
|
||||
: 'border-white/5 bg-white/5 hover:bg-white/10 cursor-pointer'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between w-full items-center">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<Checkbox
|
||||
checked={isChecked}
|
||||
disabled={disabled}
|
||||
onCheckedChange={() => { }}
|
||||
className="border-white/20 data-[state=checked]:bg-primary rounded"
|
||||
/>
|
||||
<span className="font-bold text-xs text-white">{product.name}</span>
|
||||
<span className={`text-[9px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)} font-medium`}>
|
||||
{product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
|
||||
<div className="min-w-0 w-full">
|
||||
<div className="flex justify-between items-start gap-2 w-full">
|
||||
<div className="flex items-start gap-2 min-w-0 flex-1">
|
||||
<Checkbox
|
||||
checked={isChecked}
|
||||
disabled={disabled}
|
||||
onCheckedChange={() => { }}
|
||||
className="border-white/20 data-[state=checked]:bg-primary rounded mt-0.5 shrink-0"
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<span className="font-bold text-xs text-white block break-words">{product.name}</span>
|
||||
<span className={`inline-block text-[9px] px-1.5 py-0.2 mt-1 rounded border ${billingBadgeClass(product.billing_interval)} font-medium`}>
|
||||
{product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-primary font-bold text-xs shrink-0 text-right">
|
||||
{new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
}).format(product.base_price)}{' '}
|
||||
<span className="text-[10px] text-slate-500 font-normal block">{billingLabel(product.billing_interval)}</span>
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-primary font-bold text-xs">
|
||||
{new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
}).format(product.base_price)}{' '}
|
||||
<span className="text-[10px] text-slate-500 font-normal">{billingLabel(product.billing_interval)}</span>
|
||||
</span>
|
||||
{product.description && (
|
||||
<p className="text-[11px] text-slate-400 mt-2 font-normal leading-relaxed break-words">{product.description}</p>
|
||||
)}
|
||||
</div>
|
||||
{product.description && (
|
||||
<span className="text-[11px] text-slate-400 mt-1.5 pl-6 font-normal leading-relaxed">{product.description}</span>
|
||||
)}
|
||||
{product.modules && product.modules.length > 0 && (
|
||||
<span className="text-[10px] text-slate-500 mt-1 pl-6 font-normal">
|
||||
<span className="text-[10px] text-slate-500 mt-2 font-normal block">
|
||||
{product.modules.length} optionale Module verfügbar
|
||||
</span>
|
||||
)}
|
||||
@@ -229,13 +233,13 @@ export function StepSoftware({
|
||||
<RadioGroup
|
||||
value={sel?.productId ?? ''}
|
||||
onValueChange={id => selectProduct(currentCategory.id, id)}
|
||||
className="grid gap-2.5"
|
||||
className="grid grid-cols-1 xl:grid-cols-2 gap-3"
|
||||
>
|
||||
{catProducts.map(product => {
|
||||
const disabled = isProductDisabled(product, currentCategory.id)
|
||||
const isChecked = sel?.productId === product.id
|
||||
return (
|
||||
<div key={product.id} className="relative">
|
||||
<div key={product.id} className="relative min-w-0">
|
||||
<RadioGroupItem
|
||||
value={product.id}
|
||||
id={`${currentCategory.id}-${product.id}`}
|
||||
@@ -244,33 +248,35 @@ export function StepSoftware({
|
||||
/>
|
||||
<Label
|
||||
htmlFor={disabled ? undefined : `${currentCategory.id}-${product.id}`}
|
||||
className={`flex flex-col items-start p-3.5 rounded-xl border transition-all ${disabled
|
||||
className={`flex flex-col justify-between h-full p-3 rounded-xl border transition-all ${disabled
|
||||
? 'border-white/5 bg-white/5 opacity-40 cursor-not-allowed'
|
||||
: isChecked
|
||||
? 'border-primary bg-primary/10 cursor-pointer shadow-[0_0_15px_rgba(59,130,246,0.15)] ring-1 ring-primary/40'
|
||||
: 'border-white/5 bg-white/5 hover:bg-white/10 cursor-pointer'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between w-full items-center">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span className="font-bold text-xs text-white">{product.name}</span>
|
||||
<span className={`text-[9px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)} font-medium`}>
|
||||
{product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
|
||||
<div className="min-w-0 w-full">
|
||||
<div className="flex justify-between items-start gap-2 w-full">
|
||||
<div className="min-w-0 flex-1">
|
||||
<span className="font-bold text-xs text-white block break-words">{product.name}</span>
|
||||
<span className={`inline-block text-[9px] px-1.5 py-0.2 mt-1 rounded border ${billingBadgeClass(product.billing_interval)} font-medium`}>
|
||||
{product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-primary font-bold text-xs shrink-0 text-right">
|
||||
{new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
}).format(product.base_price)}{' '}
|
||||
<span className="text-[10px] text-slate-500 font-normal block">{billingLabel(product.billing_interval)}</span>
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-primary font-bold text-xs">
|
||||
{new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
}).format(product.base_price)}{' '}
|
||||
<span className="text-[10px] text-slate-500 font-normal">{billingLabel(product.billing_interval)}</span>
|
||||
</span>
|
||||
{product.description && (
|
||||
<p className="text-[11px] text-slate-400 mt-2 font-normal leading-relaxed break-words">{product.description}</p>
|
||||
)}
|
||||
</div>
|
||||
{product.description && (
|
||||
<span className="text-[11px] text-slate-400 mt-1.5 font-normal leading-relaxed">{product.description}</span>
|
||||
)}
|
||||
{product.modules && product.modules.length > 0 && (
|
||||
<span className="text-[10px] text-slate-500 mt-1 font-normal">
|
||||
<span className="text-[10px] text-slate-500 mt-2 font-normal block">
|
||||
{product.modules.length} optionale Module verfügbar
|
||||
</span>
|
||||
)}
|
||||
@@ -283,12 +289,12 @@ export function StepSoftware({
|
||||
|
||||
{/* Modules Section */}
|
||||
{selectedProduct?.modules && selectedProduct.modules.length > 0 && (
|
||||
<div className="mt-5 p-4 rounded-2xl bg-white/5 border border-white/10 space-y-3.5">
|
||||
<div className="mt-4 p-3.5 rounded-xl bg-white/5 border border-white/10 space-y-3 min-w-0">
|
||||
<p className="text-xs font-bold text-white flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-primary" />
|
||||
Zusatzmodule für {selectedProduct.name}
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-2.5">
|
||||
{selectedProduct.modules.map(module => {
|
||||
const isExistingLicense = existingModuleIds.includes(module.id)
|
||||
const disabled = isExistingLicense || isModuleDisabled(module, sel?.moduleIds ?? [])
|
||||
@@ -297,7 +303,7 @@ export function StepSoftware({
|
||||
<div
|
||||
key={module.id}
|
||||
title={isExistingLicense ? "Dieses Modul ist auf dieser Kasse bereits aktiv und dauerhaft lizenziert." : undefined}
|
||||
className={`flex flex-col p-3.5 rounded-xl border transition-all duration-200 ${
|
||||
className={`flex flex-col justify-between p-3 rounded-xl border transition-all duration-200 min-w-0 ${
|
||||
isExistingLicense
|
||||
? 'border-primary/20 bg-primary/5 opacity-75'
|
||||
: disabled
|
||||
@@ -307,30 +313,30 @@ export function StepSoftware({
|
||||
: 'border-white/5 bg-white/5 hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex items-start space-x-2.5 min-w-0">
|
||||
<Checkbox
|
||||
id={`mod-${currentCategory.id}-${module.id}`}
|
||||
checked={checked}
|
||||
onCheckedChange={() => !isExistingLicense && toggleModule(currentCategory.id, module.id)}
|
||||
disabled={disabled}
|
||||
className="rounded border-white/20 data-[state=checked]:bg-primary mt-0.5"
|
||||
className="rounded border-white/20 data-[state=checked]:bg-primary mt-0.5 shrink-0"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<Label
|
||||
htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`}
|
||||
className={`font-semibold text-xs flex justify-between text-white ${
|
||||
className={`font-semibold text-xs flex justify-between items-start text-white gap-2 ${
|
||||
isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-center gap-1.5 flex-wrap">
|
||||
<span className="flex-1 min-w-0 break-words">
|
||||
{module.name}
|
||||
{isExistingLicense && (
|
||||
<span className="inline-flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded bg-primary/20 text-primary border border-primary/30 font-bold uppercase tracking-wider">
|
||||
<Lock className="w-2.5 h-2.5" /> Bereits lizenziert
|
||||
<span className="inline-flex items-center gap-1 text-[9px] px-1.5 py-0.2 rounded bg-primary/20 text-primary border border-primary/30 font-bold uppercase tracking-wider ml-1 mt-0.5">
|
||||
<Lock className="w-2.5 h-2.5" /> Lizenziert
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="text-primary font-bold text-xs ml-2 shrink-0">
|
||||
<span className="text-primary font-bold text-xs shrink-0 text-right">
|
||||
{isExistingLicense ? (
|
||||
<span className="text-slate-500 text-[11px] font-normal">inkl.</span>
|
||||
) : (
|
||||
@@ -342,7 +348,7 @@ export function StepSoftware({
|
||||
</span>
|
||||
</Label>
|
||||
{module.description && (
|
||||
<p className="text-[11px] text-slate-400 mt-1 leading-relaxed">{module.description}</p>
|
||||
<p className="text-[11px] text-slate-400 mt-1 leading-relaxed break-words">{module.description}</p>
|
||||
)}
|
||||
{!isExistingLicense && disabled && (
|
||||
<p className="text-[10px] text-red-400 mt-1 font-medium flex items-center gap-1">
|
||||
@@ -359,8 +365,8 @@ export function StepSoftware({
|
||||
|
||||
{/* Scalable Quantity */}
|
||||
{checked && !isExistingLicense && module.has_quantity && (
|
||||
<div className="flex items-center gap-3 mt-3 pl-7 pt-2.5 border-t border-white/5">
|
||||
<Label htmlFor={`qty-${module.id}`} className="text-[11px] text-slate-400 font-medium">Menge:</Label>
|
||||
<div className="flex items-center gap-3 mt-2.5 pl-6 pt-2 border-t border-white/5">
|
||||
<Label htmlFor={`qty-${module.id}`} className="text-[11px] text-slate-400 font-medium shrink-0">Menge:</Label>
|
||||
<Input
|
||||
id={`qty-${module.id}`}
|
||||
type="number"
|
||||
@@ -371,9 +377,9 @@ export function StepSoftware({
|
||||
const val = Math.max(1, parseInt(e.target.value) || 1)
|
||||
setModuleQuantities(prev => ({ ...prev, [module.id]: val }))
|
||||
}}
|
||||
className="w-16 h-7 bg-white/5 border-white/10 text-white text-xs text-center rounded-lg focus:border-primary focus:ring-1 focus:ring-primary"
|
||||
className="w-14 h-6 bg-white/5 border-white/10 text-white text-xs text-center rounded focus:border-primary focus:ring-1 focus:ring-primary"
|
||||
/>
|
||||
<span className="text-[11px] text-slate-400">
|
||||
<span className="text-[10px] text-slate-400 truncate">
|
||||
Gesamt:{' '}
|
||||
<span className="text-primary font-bold">
|
||||
{new Intl.NumberFormat('de-DE', {
|
||||
@@ -404,7 +410,7 @@ export function StepSoftware({
|
||||
)}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</CardContent>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -93,6 +93,7 @@ export function StepSummary({
|
||||
}: StepSummaryProps) {
|
||||
const [confirmDeleteIdx, setConfirmDeleteIdx] = useState<number | null>(null)
|
||||
const [acceptedTerms, setAcceptedTerms] = useState(false)
|
||||
const [showConfirmModal, setShowConfirmModal] = useState(false)
|
||||
|
||||
const fmt = (val: number) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(val)
|
||||
|
||||
@@ -442,29 +443,6 @@ export function StepSummary({
|
||||
className="w-full p-3 rounded-xl bg-slate-950/70 border border-white/10 text-xs text-white placeholder:text-slate-500 focus:border-primary focus:outline-none transition-colors resize-none scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Lizenzbestimmungen & B2B-Workflow Checkbox */}
|
||||
<div className="p-4 rounded-2xl bg-white/5 border border-white/10 space-y-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<Checkbox
|
||||
id="terms-checkbox"
|
||||
checked={acceptedTerms}
|
||||
onCheckedChange={(checked) => setAcceptedTerms(checked === true)}
|
||||
className="rounded border-white/20 data-[state=checked]:bg-primary mt-0.5"
|
||||
/>
|
||||
<Label htmlFor="terms-checkbox" className="text-xs text-slate-300 leading-relaxed cursor-pointer select-none">
|
||||
Ich bestätige die Richtigkeit der Angaben und akzeptiere die Lizenzvereinbarungen sowie die{' '}
|
||||
<a href="/datenschutz" target="_blank" rel="noopener noreferrer" className="underline hover:text-white text-primary">
|
||||
Datenschutzerklärung
|
||||
</a>.
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<div className="p-2.5 rounded-xl bg-primary/10 border border-primary/20 text-[11px] text-slate-300 flex items-center gap-2">
|
||||
<FileText className="w-4 h-4 text-primary shrink-0" />
|
||||
<span>B2B-Freigabe: Nach Absenden wird die Lizenzierungsanfrage geprüft und freigegeben.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -490,10 +468,10 @@ export function StepSummary({
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
{/* Submit Button -> opens modal */}
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
disabled={isSubmitting || !acceptedTerms || finalItemsToShow.length === 0}
|
||||
onClick={() => setShowConfirmModal(true)}
|
||||
disabled={isSubmitting || finalItemsToShow.length === 0}
|
||||
className="w-full sm:w-auto bg-primary hover:bg-primary/90 text-white font-bold px-6 shadow-lg shadow-primary/20 h-9 text-xs gap-2"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
@@ -509,6 +487,104 @@ export function StepSummary({
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* ─── 4. BESTÄTIGUNGS-POPUP / MODAL VOR DEM ABSENDEN ─── */}
|
||||
{showConfirmModal && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm animate-in fade-in duration-200">
|
||||
<div className="w-full max-w-lg bg-slate-900 border border-white/10 rounded-2xl shadow-2xl p-6 space-y-5 text-white">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2.5 rounded-xl bg-primary/20 text-primary border border-primary/30">
|
||||
<ShieldCheck className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-white">Richtigkeit & Freigabe bestätigen</h3>
|
||||
<p className="text-xs text-slate-400 mt-0.5">Letzter Schritt vor Übermittlung der Lizenzierung</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowConfirmModal(false)}
|
||||
disabled={isSubmitting}
|
||||
className="h-8 w-8 p-0 text-slate-400 hover:text-white rounded-lg"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 text-xs text-slate-300">
|
||||
<div className="p-3.5 rounded-xl bg-white/5 border border-white/10 space-y-2">
|
||||
<div className="flex justify-between items-center text-white font-semibold">
|
||||
<span>Endkunde:</span>
|
||||
<span className="text-primary">{selectedEndCustomer?.company_name || 'Kein Kunde gewählt'}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-slate-400">
|
||||
<span>Anzahl Geräte:</span>
|
||||
<span className="text-white font-medium">{finalItemsToShow.length} Kassen</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-slate-400">
|
||||
<span>Gesamtbetrag (brutto):</span>
|
||||
<span className="text-white font-bold">{oneTimeTotal > 0 ? fmt(oneTimeGross) : `${fmt(monthlyGross)} / mtl.`}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3.5 rounded-xl bg-slate-950/80 border border-white/10 space-y-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<Checkbox
|
||||
id="modal-terms-checkbox"
|
||||
checked={acceptedTerms}
|
||||
onCheckedChange={(checked) => setAcceptedTerms(checked === true)}
|
||||
className="rounded border-white/20 data-[state=checked]:bg-primary mt-0.5"
|
||||
/>
|
||||
<Label htmlFor="modal-terms-checkbox" className="text-xs text-slate-300 leading-relaxed cursor-pointer select-none">
|
||||
Ich bestätige die Richtigkeit aller gemachten Angaben und akzeptiere die Lizenzvereinbarungen sowie die{' '}
|
||||
<a href="/datenschutz" target="_blank" rel="noopener noreferrer" className="underline hover:text-white text-primary">
|
||||
Datenschutzerklärung
|
||||
</a>.
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<div className="p-2.5 rounded-lg bg-primary/10 border border-primary/20 text-[11px] text-slate-300 flex items-center gap-2">
|
||||
<FileText className="w-4 h-4 text-primary shrink-0" />
|
||||
<span>B2B-Freigabe: Nach Absenden wird die Lizenzierungsanfrage geprüft und freigegeben.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end gap-3 pt-2 border-t border-white/10">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowConfirmModal(false)}
|
||||
disabled={isSubmitting}
|
||||
className="border-white/10 text-white hover:bg-white/10 text-xs h-9 px-4"
|
||||
>
|
||||
Abbrechen & Zurück
|
||||
</Button>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
await handleSubmit()
|
||||
setShowConfirmModal(false)
|
||||
}}
|
||||
disabled={!acceptedTerms || isSubmitting}
|
||||
className="bg-primary hover:bg-primary/90 text-white font-bold text-xs h-9 px-5 gap-2 shadow-md shadow-primary/20"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
Wird übermittelt...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Check className="w-4 h-4" />
|
||||
Jetzt verbindlich absenden
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user