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

style: refine step 3 software select UI
All checks were successful
Staging Build / build (push) Successful in 2m54s
Details

Browse Source
This commit is contained in:
DanielS
2026-08-10 23:38:09 +02:00
parent af261ce923
commit 1c9ae2ec31
1 changed files with 218 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
shop/components/wizard/step-software.tsx
View File

@@ -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,30 +88,30 @@ 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>
)} )}
@@ -130,10 +130,10 @@ export function StepSoftware({
<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'
}`} }`}
> >
@@ -143,26 +143,26 @@ export function StepSoftware({
checked={isChecked} checked={isChecked}
disabled={disabled} disabled={disabled}
onCheckedChange={() => { }} onCheckedChange={() => { }}
className="border-white/20 data-[state=checked]:bg-primary" className="border-white/20 data-[state=checked]:bg-primary rounded"
/> />
<span className="font-bold text-base text-white">{product.name}</span> <span className="font-bold text-sm text-white">{product.name}</span>
<span className={`text-[10px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)}`}> <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/Monat'} {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
</span> </span>
</div> </div>
<span className="text-primary font-semibold text-sm"> <span className="text-primary font-bold text-sm">
{new Intl.NumberFormat('de-DE', { {new Intl.NumberFormat('de-DE', {
style: 'currency', style: 'currency',
currency: 'EUR', currency: 'EUR',
}).format(product.base_price)}{' '} }).format(product.base_price)}{' '}
<span className="text-xs text-slate-400">{billingLabel(product.billing_interval)}</span> <span className="text-[10px] text-slate-500 font-normal">{billingLabel(product.billing_interval)}</span>
</span> </span>
</div> </div>
{product.description && ( {product.description && (
<span className="text-sm text-slate-300 mt-1 pl-7">{product.description}</span> <span className="text-xs text-slate-400 mt-2 pl-7 font-normal leading-relaxed">{product.description}</span>
)} )}
{product.modules && product.modules.length > 0 && ( {product.modules && product.modules.length > 0 && (
<span className="text-xs text-slate-500 mt-1 pl-7"> <span className="text-[10px] text-slate-500 mt-1 pl-7 font-normal">
{product.modules.length} optionale Module verfügbar {product.modules.length} optionale Module verfügbar
</span> </span>
)} )}
@@ -179,6 +179,7 @@ export function StepSoftware({
> >
{catProducts.map(product => { {catProducts.map(product => {
const disabled = isProductDisabled(product, currentCategory.id) const disabled = isProductDisabled(product, currentCategory.id)
const isChecked = sel?.productId === product.id
return ( return (
<div key={product.id} className="relative"> <div key={product.id} className="relative">
<RadioGroupItem <RadioGroupItem
@@ -189,31 +190,33 @@ export function StepSoftware({
/> />
<Label <Label
htmlFor={disabled ? undefined : `${currentCategory.id}-${product.id}`} htmlFor={disabled ? undefined : `${currentCategory.id}-${product.id}`}
className={`flex flex-col items-start p-4 rounded-xl border-2 border-white/5 bg-white/5 transition-all ${disabled className={`flex flex-col items-start p-4 rounded-xl border transition-all ${disabled
? 'opacity-50 cursor-not-allowed' ? 'border-white/5 bg-white/5 opacity-40 cursor-not-allowed'
: 'hover:bg-white/10 peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5 cursor-pointer' : 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 justify-between w-full items-center">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="font-bold text-base text-white">{product.name}</span> <span className="font-bold text-sm text-white">{product.name}</span>
<span className={`text-[10px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)}`}> <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/Monat'} {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
</span> </span>
</div> </div>
<span className="text-primary font-semibold text-sm"> <span className="text-primary font-bold text-sm">
{new Intl.NumberFormat('de-DE', { {new Intl.NumberFormat('de-DE', {
style: 'currency', style: 'currency',
currency: 'EUR', currency: 'EUR',
}).format(product.base_price)}{' '} }).format(product.base_price)}{' '}
<span className="text-xs text-slate-400">{billingLabel(product.billing_interval)}</span> <span className="text-[10px] text-slate-500 font-normal">{billingLabel(product.billing_interval)}</span>
</span> </span>
</div> </div>
{product.description && ( {product.description && (
<span className="text-sm text-slate-300 mt-1">{product.description}</span> <span className="text-xs text-slate-400 mt-2 font-normal leading-relaxed">{product.description}</span>
)} )}
{product.modules && product.modules.length > 0 && ( {product.modules && product.modules.length > 0 && (
<span className="text-xs text-slate-500 mt-1"> <span className="text-[10px] text-slate-500 mt-1 font-normal">
{product.modules.length} optionale Module verfügbar {product.modules.length} optionale Module verfügbar
</span> </span>
)} )}
@@ -226,8 +229,12 @@ export function StepSoftware({
{/* Modules */} {/* Modules */}
{selectedProduct?.modules && selectedProduct.modules.length > 0 && ( {selectedProduct?.modules && selectedProduct.modules.length > 0 && (
<div className="mt-4 space-y-3 pl-2 border-l-2 border-primary/30"> <div className="mt-6 p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4">
<p className="text-sm font-semibold text-white ml-2">Zusatzmodule:</p> <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 => { {selectedProduct.modules.map(module => {
const isExistingLicense = existingModuleIds.includes(module.id) const isExistingLicense = existingModuleIds.includes(module.id)
const disabled = isExistingLicense || isModuleDisabled(module, sel?.moduleIds ?? []) const disabled = isExistingLicense || isModuleDisabled(module, sel?.moduleIds ?? [])
@@ -235,11 +242,13 @@ export function StepSoftware({
return ( return (
<div <div
key={module.id} key={module.id}
className={`flex flex-col p-3 rounded-lg border ml-2 transition-colors ${ className={`flex flex-col p-4 rounded-xl border transition-all duration-200 ${
isExistingLicense isExistingLicense
? 'border-primary/20 bg-primary/5 opacity-75' ? 'border-primary/20 bg-primary/5 opacity-75'
: disabled : disabled
? 'border-white/5 bg-white/5 opacity-50' ? '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' : 'border-white/5 bg-white/5 hover:bg-white/10'
}`} }`}
> >
@@ -249,25 +258,26 @@ export function StepSoftware({
checked={checked} checked={checked}
onCheckedChange={() => !isExistingLicense && toggleModule(currentCategory.id, module.id)} onCheckedChange={() => !isExistingLicense && toggleModule(currentCategory.id, module.id)}
disabled={disabled} disabled={disabled}
className="rounded border-white/20 data-[state=checked]:bg-primary"
/> />
<div className="flex-1"> <div className="flex-1">
<Label <Label
htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`} htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`}
className={`font-medium flex justify-between text-white ${ className={`font-semibold text-sm flex justify-between text-white ${
isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer' isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
}`} }`}
> >
<span className="flex items-center gap-1.5"> <span className="flex items-center gap-1.5 flex-wrap">
{module.name} {module.name}
{isExistingLicense && ( {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"> <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 <Lock className="w-2.5 h-2.5" /> Bereits lizenziert
</span> </span>
)} )}
</span> </span>
<span className="text-primary font-bold"> <span className="text-primary font-bold text-sm">
{isExistingLicense ? ( {isExistingLicense ? (
<span className="text-slate-500 text-xs">inkl.</span> <span className="text-slate-500 text-xs font-normal">inkl.</span>
) : ( ) : (
<>+{new Intl.NumberFormat('de-DE', { <>+{new Intl.NumberFormat('de-DE', {
style: 'currency', style: 'currency',
@@ -277,10 +287,11 @@ export function StepSoftware({
</span> </span>
</Label> </Label>
{module.description && ( {module.description && (
<p className="text-xs text-slate-400">{module.description}</p> <p className="text-xs text-slate-400 mt-1 leading-relaxed">{module.description}</p>
)} )}
{!isExistingLicense && disabled && ( {!isExistingLicense && disabled && (
<p className="text-[10px] text-destructive mt-1"> <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" />
{module.requirements?.length && !module.requirements.some( {module.requirements?.length && !module.requirements.some(
reqId => sel?.moduleIds.includes(reqId) reqId => sel?.moduleIds.includes(reqId)
) )
@@ -293,8 +304,8 @@ export function StepSoftware({
{/* Scalable Quantity */} {/* Scalable Quantity */}
{checked && !isExistingLicense && module.has_quantity && ( {checked && !isExistingLicense && module.has_quantity && (
<div className="flex items-center gap-3 mt-3 pl-8 pt-2 border-t border-white/5"> <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">Menge:</Label> <Label htmlFor={`qty-${module.id}`} className="text-xs text-slate-400 font-medium">Menge:</Label>
<Input <Input
id={`qty-${module.id}`} id={`qty-${module.id}`}
type="number" type="number"
@@ -305,20 +316,24 @@ export function StepSoftware({
const val = Math.max(1, parseInt(e.target.value) || 1) const val = Math.max(1, parseInt(e.target.value) || 1)
setModuleQuantities(prev => ({ ...prev, [module.id]: val })) 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" 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-500"> <span className="text-xs text-slate-400">
Gesamt: {new Intl.NumberFormat('de-DE', { Gesamt:{' '}
<span className="text-primary font-bold">
{new Intl.NumberFormat('de-DE', {
style: 'currency', style: 'currency',
currency: 'EUR', currency: 'EUR',
}).format(module.price * (moduleQuantities[module.id] || 1))} }).format(module.price * (moduleQuantities[module.id] || 1))}
</span> </span>
</span>
</div> </div>
)} )}
</div> </div>
) )
})} })}
</div> </div>
</div>
)} )}
</motion.div> </motion.div>
</AnimatePresence> </AnimatePresence>