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

feat(wizard): allow direct basket item switching in step 3 software configuration

Browse Source
This commit is contained in:
DanielS
2026-08-11 22:44:33 +02:00
parent 6eeb56d62a
commit 0404a1dd83
1 changed files with 62 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
shop/components/wizard/summary-sidebar.tsx
View File

@@ -259,55 +259,71 @@ export function SummarySidebar({
</div> {/* Warenkorb List (Scrollable) */}
{basketItems.length > 0 && (
<div className="shrink-0 pt-3 pb-2 border-t border-white/10 space-y-2">
<p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Kassen ({basketItems.length}):</p>
<div className="flex items-center justify-between text-xs text-slate-400">
<span className="font-semibold uppercase tracking-wider">Kassen ({basketItems.length}):</span>
<span className="text-[10px] text-slate-500">Zum Bearbeiten anklicken</span>
</div>
<div className="flex flex-col gap-2 max-h-36 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
{basketItems.map((item, idx) => (
<div
key={idx}
className={`flex items-center justify-between p-2.5 rounded-xl border transition-all duration-200 text-left ${
idx === editingIdx
? 'border-primary/50 bg-primary/10 text-white shadow-[0_0_12px_rgba(59,130,246,0.15)]'
: 'border-white/10 bg-slate-900/60 text-slate-300 hover:border-white/20 hover:bg-slate-900'
}`}
>
<div className="flex-1 min-w-0 pr-2">
<div className="flex items-center gap-1.5">
<span className="font-bold text-xs text-white truncate">{item.deviceName}</span>
<span className="text-[9px] px-1.5 py-0.2 rounded border border-white/10 text-slate-400 bg-white/5 uppercase">
{item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
</span>
{basketItems.map((item, idx) => {
const isEditing = idx === editingIdx
return (
<div
key={idx}
onClick={() => editBasketItem(idx)}
className={`flex items-center justify-between p-2.5 rounded-xl border transition-all duration-200 text-left cursor-pointer group ${
isEditing
? 'border-primary bg-primary/15 text-white shadow-[0_0_12px_rgba(59,130,246,0.25)]'
: 'border-white/10 bg-slate-900/60 text-slate-300 hover:border-white/20 hover:bg-slate-900'
}`}
>
<div className="flex-1 min-w-0 pr-2">
<div className="flex items-center gap-1.5">
<span className="font-bold text-xs text-white truncate">{item.deviceName}</span>
<span className="text-[9px] px-1.5 py-0.2 rounded border border-white/10 text-slate-400 bg-white/5 uppercase">
{item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
</span>
{isEditing && (
<span className="text-[9px] px-1.5 py-0.2 rounded bg-primary text-slate-950 font-extrabold uppercase">
Aktiv
</span>
)}
</div>
{item.licenseNumber && (
<p className="text-[10px] text-slate-400 truncate mt-0.5">Lizenz: {item.licenseNumber}</p>
)}
</div>
<div className="flex items-center gap-1 shrink-0">
<Button
type="button"
variant="ghost"
size="icon"
className="w-6 h-6 hover:bg-primary/20 text-slate-400 hover:text-primary rounded-lg transition-colors"
onClick={(e) => {
e.stopPropagation()
editBasketItem(idx)
setIsOpen(true)
}}
title="Name / Lizenz bearbeiten"
>
<Pencil className="w-3 h-3" />
</Button>
<Button
type="button"
variant="ghost"
size="icon"
className="w-6 h-6 hover:bg-red-500/20 text-slate-400 hover:text-red-400 rounded-lg transition-colors"
onClick={(e) => {
e.stopPropagation()
deleteBasketItem(idx)
}}
title="Löschen"
>
<Trash2 className="w-3 h-3" />
</Button>
</div>
{item.licenseNumber && (
<p className="text-[10px] text-slate-400 truncate mt-0.5">Lizenz: {item.licenseNumber}</p>
)}
</div>
<div className="flex items-center gap-1 shrink-0">
<Button
type="button"
variant="ghost"
size="icon"
className="w-6 h-6 hover:bg-primary/20 text-slate-400 hover:text-primary rounded-lg transition-colors"
onClick={() => {
editBasketItem(idx)
setIsOpen(true)
}}
title="Bearbeiten"
>
<Pencil className="w-3 h-3" />
</Button>
<Button
type="button"
variant="ghost"
size="icon"
className="w-6 h-6 hover:bg-red-500/20 text-slate-400 hover:text-red-400 rounded-lg transition-colors"
onClick={() => deleteBasketItem(idx)}
title="Löschen"
>
<Trash2 className="w-3 h-3" />
</Button>
</div>
</div>
))}
)
})}
</div>
</div>
)}