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

feat(wizard): streamline step 3 with inline inputs and list/edit all devices in step 4

Browse Source
This commit is contained in:
DanielS
2026-08-11 23:01:04 +02:00
parent edb5873e33
commit 4598233cf4
3 changed files with 111 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
shop/components/wizard/step-summary.tsx
View File

@@ -32,6 +32,8 @@ interface StepSummaryProps {
linkedFeeProducts?: Product[]
orderNotes: string
setOrderNotes: (notes: string) => void
onEditBasketItem?: (idx: number) => void
onAddNewBasketItem?: () => void
}
function CategoryIcon({ icon, className }: { icon?: string | null; className?: string }) {
@@ -63,6 +65,8 @@ export function StepSummary({
linkedFeeProducts = [],
orderNotes,
setOrderNotes,
onEditBasketItem,
onAddNewBasketItem,
}: StepSummaryProps) {
return (
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 h-full items-stretch text-left">
@@ -152,11 +156,24 @@ export function StepSummary({
<div className="lg:col-span-7 flex flex-col h-full overflow-hidden pl-4">
<Card className="glass-dark border-white/10 shadow-2xl overflow-hidden rounded-2xl flex flex-col h-full">
<CardHeader className="shrink-0 border-b border-white/5 pb-4">
<CardTitle className="text-lg text-white flex items-center justify-between font-bold">
<span>Zusammenfassung der Positionen</span>
<Badge className="bg-primary/20 text-primary border border-primary/30 text-xs rounded-full">
{finalItemsToShow.length} {finalItemsToShow.length === 1 ? 'Kasse' : 'Kassen'}
</Badge>
<CardTitle className="text-lg text-white flex items-center justify-between font-bold flex-wrap gap-2">
<div className="flex items-center gap-2">
<span>Zusammenfassung der Positionen</span>
<Badge className="bg-primary/20 text-primary border border-primary/30 text-xs rounded-full">
{finalItemsToShow.length} {finalItemsToShow.length === 1 ? 'Kasse' : 'Kassen'}
</Badge>
</div>
{onAddNewBasketItem && (
<Button
type="button"
variant="outline"
size="sm"
onClick={onAddNewBasketItem}
className="border-dashed border-primary/50 text-primary hover:bg-primary/10 text-xs font-bold gap-1.5 h-8 rounded-lg"
>
<Icons.UserPlus className="w-3.5 h-3.5" /> + Weitere Kasse anlegen
</Button>
)}
</CardTitle>
</CardHeader>
@@ -165,11 +182,31 @@ export function StepSummary({
<div className="space-y-6">
{finalItemsToShow.map((item, itemIdx) => (
<div key={itemIdx} className="space-y-3 border-b border-white/5 pb-5 last:border-0 last:pb-0">
<div className="flex justify-between items-center bg-white/5 p-3 rounded-xl border border-white/10">
<span className="text-white font-bold text-sm">Kasse: {item.deviceName}</span>
<span className={`text-[10px] px-2 py-0.5 rounded border ${item.billingInterval === 'one_time' ? 'border-amber-500/30 text-amber-400 bg-amber-500/10' : 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'} font-semibold uppercase`}>
{item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
</span>
<div
onClick={() => onEditBasketItem && onEditBasketItem(itemIdx)}
className={`flex justify-between items-center bg-white/5 p-3 rounded-xl border border-white/10 ${onEditBasketItem ? 'cursor-pointer hover:border-primary/50 hover:bg-white/10 transition-all group' : ''}`}
>
<div className="flex items-center gap-2">
<span className="text-white font-bold text-sm">Kasse: {item.deviceName}</span>
{item.licenseNumber && (
<span className="text-[10px] text-slate-400">({item.licenseNumber})</span>
)}
</div>
<div className="flex items-center gap-2">
<span className={`text-[10px] px-2 py-0.5 rounded border ${item.billingInterval === 'one_time' ? 'border-amber-500/30 text-amber-400 bg-amber-500/10' : 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'} font-semibold uppercase`}>
{item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
</span>
{onEditBasketItem && (
<Button
type="button"
variant="ghost"
size="sm"
className="h-7 px-2 text-xs text-slate-300 group-hover:text-primary group-hover:bg-primary/20 gap-1 rounded-lg"
>
<Icons.Pencil className="w-3 h-3" /> Bearbeiten
</Button>
)}
</div>
</div>
{visibleCategories.map(cat => {