style: refine step 3 software select UI
All checks were successful
Staging Build / build (push) Successful in 2m54s
All checks were successful
Staging Build / build (push) Successful in 2m54s
This commit is contained in:
DanielS
@@ -67,10 +67,10 @@ export function StepSoftware({
|
|||||||
const selectedProduct = catProducts.find(p => p.id === sel?.productId) ?? null
|
const selectedProduct = catProducts.find(p => p.id === sel?.productId) ?? null
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="glass-dark border-white/10 h-full flex flex-col">
|
<Card className="glass-dark border-white/10 h-full flex flex-col rounded-2xl">
|
||||||
<CardHeader className="border-b border-white/5 pb-4">
|
<CardHeader className="border-b border-white/5 pb-4">
|
||||||
<CardTitle className="text-xl flex items-center gap-2 text-white">
|
<CardTitle className="text-xl flex items-center gap-2 text-white font-bold">
|
||||||
<ShoppingCart className="w-5 h-5 text-blue-400" />
|
<ShoppingCart className="w-5 h-5 text-primary" />
|
||||||
Optionen wählen
|
Optionen wählen
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
<CardDescription className="text-slate-400">
|
<CardDescription className="text-slate-400">
|
||||||
@@ -88,238 +88,253 @@ export function StepSoftware({
|
|||||||
className="space-y-6"
|
className="space-y-6"
|
||||||
>
|
>
|
||||||
{/* Category header */}
|
{/* Category header */}
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3 bg-white/5 p-4 rounded-xl border border-white/10">
|
||||||
<div className="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center">
|
<div className="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center">
|
||||||
<CategoryIcon icon={currentCategory.icon} className="w-4 h-4 text-primary" />
|
<CategoryIcon icon={currentCategory.icon} className="w-4 h-4 text-primary" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 className="font-bold text-white text-base">{currentCategory.name}</h3>
|
<h3 className="font-bold text-white text-sm">{currentCategory.name}</h3>
|
||||||
{currentCategory.description && (
|
{currentCategory.description && (
|
||||||
<p className="text-slate-400 text-xs">{currentCategory.description}</p>
|
<p className="text-slate-400 text-xs mt-0.5">{currentCategory.description}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{sel?.productIds && sel.productIds.length > 0 ? (
|
{sel?.productIds && sel.productIds.length > 0 ? (
|
||||||
<Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30">
|
<Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs rounded-full">
|
||||||
<Check className="w-3 h-3 mr-1" /> {sel.productIds.length} Ausgewählt
|
<Check className="w-3 h-3 mr-1" /> {sel.productIds.length} Ausgewählt
|
||||||
</Badge>
|
</Badge>
|
||||||
) : sel?.productId ? (
|
) : sel?.productId ? (
|
||||||
<Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30">
|
<Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs rounded-full">
|
||||||
<Check className="w-3 h-3 mr-1" /> Ausgewählt
|
<Check className="w-3 h-3 mr-1" /> Ausgewählt
|
||||||
</Badge>
|
</Badge>
|
||||||
) : currentCategory.is_required ? (
|
) : currentCategory.is_required ? (
|
||||||
<Badge variant="destructive" className="ml-auto opacity-80">
|
<Badge variant="destructive" className="ml-auto opacity-90 text-xs rounded-full bg-red-500/20 text-red-400 border border-red-500/30">
|
||||||
<AlertCircle className="w-3 h-3 mr-1" /> Pflichtfeld
|
<AlertCircle className="w-3 h-3 mr-1" /> Erforderlich
|
||||||
</Badge>
|
</Badge>
|
||||||
) : (
|
) : (
|
||||||
<Badge variant="outline" className="ml-auto border-white/20 text-slate-400">
|
<Badge variant="outline" className="ml-auto border-white/10 text-slate-400 text-xs rounded-full bg-white/5">
|
||||||
Optional
|
Optional
|
||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{catProducts.length === 0 ? (
|
{catProducts.length === 0 ? (
|
||||||
<p className="text-slate-500 text-sm italic">
|
<p className="text-slate-500 text-sm italic">
|
||||||
Keine Produkte in dieser Kategorie im aktuellen Abrechnungsmodell vorhanden.
|
Keine Produkte in dieser Kategorie im aktuellen Abrechnungsmodell vorhanden.
|
||||||
</p>
|
</p>
|
||||||
) : currentCategory.allow_multiselect ? (
|
) : currentCategory.allow_multiselect ? (
|
||||||
<div className="grid gap-3">
|
<div className="grid gap-3">
|
||||||
{catProducts.map(product => {
|
{catProducts.map(product => {
|
||||||
const isChecked = sel?.productIds?.includes(product.id) ?? false
|
const isChecked = sel?.productIds?.includes(product.id) ?? false
|
||||||
const disabled = isProductDisabled(product, currentCategory.id)
|
const disabled = isProductDisabled(product, currentCategory.id)
|
||||||
return (
|
return (
|
||||||
<div key={product.id} className="relative">
|
<div key={product.id} className="relative">
|
||||||
<Label
|
<Label
|
||||||
onClick={() => !disabled && selectProduct(currentCategory.id, product.id)}
|
onClick={() => !disabled && selectProduct(currentCategory.id, product.id)}
|
||||||
className={`flex flex-col items-start p-4 rounded-xl border-2 transition-all ${disabled
|
className={`flex flex-col items-start p-4 rounded-xl border transition-all ${disabled
|
||||||
? 'border-white/5 bg-white/5 opacity-50 cursor-not-allowed'
|
? 'border-white/5 bg-white/5 opacity-40 cursor-not-allowed'
|
||||||
: isChecked
|
: isChecked
|
||||||
? 'border-primary bg-primary/5 cursor-pointer'
|
? 'border-primary bg-primary/10 cursor-pointer shadow-[0_0_15px_rgba(59,130,246,0.1)]'
|
||||||
: 'border-white/5 bg-white/5 hover:bg-white/10 cursor-pointer'
|
: 'border-white/5 bg-white/5 hover:bg-white/10 cursor-pointer'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className="flex justify-between w-full items-center">
|
<div className="flex justify-between w-full items-center">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={isChecked}
|
checked={isChecked}
|
||||||
disabled={disabled}
|
|
||||||
onCheckedChange={() => { }}
|
|
||||||
className="border-white/20 data-[state=checked]:bg-primary"
|
|
||||||
/>
|
|
||||||
<span className="font-bold text-base text-white">{product.name}</span>
|
|
||||||
<span className={`text-[10px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)}`}>
|
|
||||||
{product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo/Monat'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<span className="text-primary font-semibold text-sm">
|
|
||||||
{new Intl.NumberFormat('de-DE', {
|
|
||||||
style: 'currency',
|
|
||||||
currency: 'EUR',
|
|
||||||
}).format(product.base_price)}{' '}
|
|
||||||
<span className="text-xs text-slate-400">{billingLabel(product.billing_interval)}</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{product.description && (
|
|
||||||
<span className="text-sm text-slate-300 mt-1 pl-7">{product.description}</span>
|
|
||||||
)}
|
|
||||||
{product.modules && product.modules.length > 0 && (
|
|
||||||
<span className="text-xs text-slate-500 mt-1 pl-7">
|
|
||||||
{product.modules.length} optionale Module verfügbar
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<RadioGroup
|
|
||||||
value={sel?.productId ?? ''}
|
|
||||||
onValueChange={id => selectProduct(currentCategory.id, id)}
|
|
||||||
className="grid gap-3"
|
|
||||||
>
|
|
||||||
{catProducts.map(product => {
|
|
||||||
const disabled = isProductDisabled(product, currentCategory.id)
|
|
||||||
return (
|
|
||||||
<div key={product.id} className="relative">
|
|
||||||
<RadioGroupItem
|
|
||||||
value={product.id}
|
|
||||||
id={`${currentCategory.id}-${product.id}`}
|
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
className="peer sr-only"
|
onCheckedChange={() => { }}
|
||||||
|
className="border-white/20 data-[state=checked]:bg-primary rounded"
|
||||||
/>
|
/>
|
||||||
|
<span className="font-bold text-sm 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'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-primary font-bold text-sm">
|
||||||
|
{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>
|
||||||
|
</div>
|
||||||
|
{product.description && (
|
||||||
|
<span className="text-xs text-slate-400 mt-2 pl-7 font-normal leading-relaxed">{product.description}</span>
|
||||||
|
)}
|
||||||
|
{product.modules && product.modules.length > 0 && (
|
||||||
|
<span className="text-[10px] text-slate-500 mt-1 pl-7 font-normal">
|
||||||
|
{product.modules.length} optionale Module verfügbar
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<RadioGroup
|
||||||
|
value={sel?.productId ?? ''}
|
||||||
|
onValueChange={id => selectProduct(currentCategory.id, id)}
|
||||||
|
className="grid gap-3"
|
||||||
|
>
|
||||||
|
{catProducts.map(product => {
|
||||||
|
const disabled = isProductDisabled(product, currentCategory.id)
|
||||||
|
const isChecked = sel?.productId === product.id
|
||||||
|
return (
|
||||||
|
<div key={product.id} className="relative">
|
||||||
|
<RadioGroupItem
|
||||||
|
value={product.id}
|
||||||
|
id={`${currentCategory.id}-${product.id}`}
|
||||||
|
disabled={disabled}
|
||||||
|
className="peer sr-only"
|
||||||
|
/>
|
||||||
|
<Label
|
||||||
|
htmlFor={disabled ? undefined : `${currentCategory.id}-${product.id}`}
|
||||||
|
className={`flex flex-col items-start p-4 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.1)]'
|
||||||
|
: '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">
|
||||||
|
<span className="font-bold text-sm 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'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-primary font-bold text-sm">
|
||||||
|
{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>
|
||||||
|
</div>
|
||||||
|
{product.description && (
|
||||||
|
<span className="text-xs text-slate-400 mt-2 font-normal leading-relaxed">{product.description}</span>
|
||||||
|
)}
|
||||||
|
{product.modules && product.modules.length > 0 && (
|
||||||
|
<span className="text-[10px] text-slate-500 mt-1 font-normal">
|
||||||
|
{product.modules.length} optionale Module verfügbar
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</RadioGroup>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Modules */}
|
||||||
|
{selectedProduct?.modules && selectedProduct.modules.length > 0 && (
|
||||||
|
<div className="mt-6 p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4">
|
||||||
|
<p className="text-sm 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.5">
|
||||||
|
{selectedProduct.modules.map(module => {
|
||||||
|
const isExistingLicense = existingModuleIds.includes(module.id)
|
||||||
|
const disabled = isExistingLicense || isModuleDisabled(module, sel?.moduleIds ?? [])
|
||||||
|
const checked = isExistingLicense || (sel?.moduleIds.includes(module.id) ?? false)
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={module.id}
|
||||||
|
className={`flex flex-col p-4 rounded-xl border transition-all duration-200 ${
|
||||||
|
isExistingLicense
|
||||||
|
? 'border-primary/20 bg-primary/5 opacity-75'
|
||||||
|
: disabled
|
||||||
|
? 'border-white/5 bg-white/5 opacity-40'
|
||||||
|
: checked
|
||||||
|
? 'border-primary/30 bg-primary/5'
|
||||||
|
: 'border-white/5 bg-white/5 hover:bg-white/10'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-start space-x-3">
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
<Label
|
<Label
|
||||||
htmlFor={disabled ? undefined : `${currentCategory.id}-${product.id}`}
|
htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`}
|
||||||
className={`flex flex-col items-start p-4 rounded-xl border-2 border-white/5 bg-white/5 transition-all ${disabled
|
className={`font-semibold text-sm flex justify-between text-white ${
|
||||||
? 'opacity-50 cursor-not-allowed'
|
isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
|
||||||
: 'hover:bg-white/10 peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5 cursor-pointer'
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className="flex justify-between w-full items-center">
|
<span className="flex items-center gap-1.5 flex-wrap">
|
||||||
<div className="flex items-center gap-2">
|
{module.name}
|
||||||
<span className="font-bold text-base text-white">{product.name}</span>
|
{isExistingLicense && (
|
||||||
<span className={`text-[10px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)}`}>
|
<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">
|
||||||
{product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo/Monat'}
|
<Lock className="w-2.5 h-2.5" /> Bereits lizenziert
|
||||||
</span>
|
</span>
|
||||||
</div>
|
)}
|
||||||
<span className="text-primary font-semibold text-sm">
|
</span>
|
||||||
{new Intl.NumberFormat('de-DE', {
|
<span className="text-primary font-bold text-sm">
|
||||||
|
{isExistingLicense ? (
|
||||||
|
<span className="text-slate-500 text-xs font-normal">inkl.</span>
|
||||||
|
) : (
|
||||||
|
<>+{new Intl.NumberFormat('de-DE', {
|
||||||
style: 'currency',
|
style: 'currency',
|
||||||
currency: 'EUR',
|
currency: 'EUR',
|
||||||
}).format(product.base_price)}{' '}
|
}).format(module.price)}</>
|
||||||
<span className="text-xs text-slate-400">{billingLabel(product.billing_interval)}</span>
|
)}
|
||||||
</span>
|
</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>
|
</Label>
|
||||||
</div>
|
{module.description && (
|
||||||
)
|
<p className="text-xs text-slate-400 mt-1 leading-relaxed">{module.description}</p>
|
||||||
})}
|
)}
|
||||||
</RadioGroup>
|
{!isExistingLicense && disabled && (
|
||||||
)}
|
<p className="text-[10px] text-red-400 mt-1.5 font-medium flex items-center gap-1">
|
||||||
|
<AlertCircle className="w-3 h-3 text-red-400 shrink-0" />
|
||||||
{/* Modules */}
|
{module.requirements?.length && !module.requirements.some(
|
||||||
{selectedProduct?.modules && selectedProduct.modules.length > 0 && (
|
reqId => sel?.moduleIds.includes(reqId)
|
||||||
<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>
|
? 'Benötigt weitere Module'
|
||||||
{selectedProduct.modules.map(module => {
|
: 'Nicht kombinierbar mit aktueller Auswahl'}
|
||||||
const isExistingLicense = existingModuleIds.includes(module.id)
|
</p>
|
||||||
const disabled = isExistingLicense || isModuleDisabled(module, sel?.moduleIds ?? [])
|
|
||||||
const checked = isExistingLicense || (sel?.moduleIds.includes(module.id) ?? false)
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={module.id}
|
|
||||||
className={`flex flex-col p-3 rounded-lg border ml-2 transition-colors ${
|
|
||||||
isExistingLicense
|
|
||||||
? 'border-primary/20 bg-primary/5 opacity-75'
|
|
||||||
: disabled
|
|
||||||
? 'border-white/5 bg-white/5 opacity-50'
|
|
||||||
: 'border-white/5 bg-white/5 hover:bg-white/10'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="flex items-start space-x-3">
|
|
||||||
<Checkbox
|
|
||||||
id={`mod-${currentCategory.id}-${module.id}`}
|
|
||||||
checked={checked}
|
|
||||||
onCheckedChange={() => !isExistingLicense && toggleModule(currentCategory.id, module.id)}
|
|
||||||
disabled={disabled}
|
|
||||||
/>
|
|
||||||
<div className="flex-1">
|
|
||||||
<Label
|
|
||||||
htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`}
|
|
||||||
className={`font-medium flex justify-between text-white ${
|
|
||||||
isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<span className="flex items-center gap-1.5">
|
|
||||||
{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-semibold">
|
|
||||||
<Lock className="w-2.5 h-2.5" /> Bereits lizenziert
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span className="text-primary font-bold">
|
|
||||||
{isExistingLicense ? (
|
|
||||||
<span className="text-slate-500 text-xs">inkl.</span>
|
|
||||||
) : (
|
|
||||||
<>+{new Intl.NumberFormat('de-DE', {
|
|
||||||
style: 'currency',
|
|
||||||
currency: 'EUR',
|
|
||||||
}).format(module.price)}</>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</Label>
|
|
||||||
{module.description && (
|
|
||||||
<p className="text-xs text-slate-400">{module.description}</p>
|
|
||||||
)}
|
|
||||||
{!isExistingLicense && disabled && (
|
|
||||||
<p className="text-[10px] text-destructive mt-1">
|
|
||||||
{module.requirements?.length && !module.requirements.some(
|
|
||||||
reqId => sel?.moduleIds.includes(reqId)
|
|
||||||
)
|
|
||||||
? 'Benötigt weitere Module'
|
|
||||||
: 'Nicht kombinierbar mit aktueller Auswahl'}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Scalable Quantity */}
|
|
||||||
{checked && !isExistingLicense && module.has_quantity && (
|
|
||||||
<div className="flex items-center gap-3 mt-3 pl-8 pt-2 border-t border-white/5">
|
|
||||||
<Label htmlFor={`qty-${module.id}`} className="text-xs text-slate-400">Menge:</Label>
|
|
||||||
<Input
|
|
||||||
id={`qty-${module.id}`}
|
|
||||||
type="number"
|
|
||||||
min={1}
|
|
||||||
max={999}
|
|
||||||
value={moduleQuantities[module.id] || 1}
|
|
||||||
onChange={(e) => {
|
|
||||||
const val = Math.max(1, parseInt(e.target.value) || 1)
|
|
||||||
setModuleQuantities(prev => ({ ...prev, [module.id]: val }))
|
|
||||||
}}
|
|
||||||
className="w-20 h-8 bg-white/5 border-white/10 text-white text-xs text-center rounded-lg"
|
|
||||||
/>
|
|
||||||
<span className="text-xs text-slate-500">
|
|
||||||
Gesamt: {new Intl.NumberFormat('de-DE', {
|
|
||||||
style: 'currency',
|
|
||||||
currency: 'EUR',
|
|
||||||
}).format(module.price * (moduleQuantities[module.id] || 1))}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
</div>
|
||||||
})}
|
|
||||||
</div>
|
{/* Scalable Quantity */}
|
||||||
)}
|
{checked && !isExistingLicense && module.has_quantity && (
|
||||||
|
<div className="flex items-center gap-3 mt-4 pl-8 pt-3 border-t border-white/5">
|
||||||
|
<Label htmlFor={`qty-${module.id}`} className="text-xs text-slate-400 font-medium">Menge:</Label>
|
||||||
|
<Input
|
||||||
|
id={`qty-${module.id}`}
|
||||||
|
type="number"
|
||||||
|
min={1}
|
||||||
|
max={999}
|
||||||
|
value={moduleQuantities[module.id] || 1}
|
||||||
|
onChange={(e) => {
|
||||||
|
const val = Math.max(1, parseInt(e.target.value) || 1)
|
||||||
|
setModuleQuantities(prev => ({ ...prev, [module.id]: val }))
|
||||||
|
}}
|
||||||
|
className="w-16 h-8 bg-white/5 border-white/10 text-white text-xs text-center rounded-lg focus:border-primary focus:ring-1 focus:ring-primary"
|
||||||
|
/>
|
||||||
|
<span className="text-xs text-slate-400">
|
||||||
|
Gesamt:{' '}
|
||||||
|
<span className="text-primary font-bold">
|
||||||
|
{new Intl.NumberFormat('de-DE', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'EUR',
|
||||||
|
}).format(module.price * (moduleQuantities[module.id] || 1))}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
|
|||||||
Reference in New Issue
Block a user