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

feat: add edit and delete actions to basket items for device configuration switching
Some checks failed
Staging Build / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
DanielS
2026-07-10 00:52:22 +02:00
parent a95afbf443
commit 99cbb11c5a
1 changed files with 47 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
shop/components/order-wizard.tsx
View File

@@ -11,7 +11,7 @@ import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
import { Check, ChevronRight, ChevronLeft, ShoppingCart, User, ShieldCheck, Cloud, Utensils, HardDrive, Package, AlertCircle, Loader2, UserPlus, Building2, CreditCard, Calendar, Search } from 'lucide-react'
import { Check, ChevronRight, ChevronLeft, ShoppingCart, User, ShieldCheck, Cloud, Utensils, HardDrive, Package, AlertCircle, Loader2, UserPlus, Building2, CreditCard, Calendar, Search, Pencil, Trash2 } from 'lucide-react'
import { submitOrder, updateOrder } from '@/lib/actions/orders'
import { createEndCustomer } from '@/lib/actions/end-customers'
import { Category } from '@/lib/types'
@@ -582,6 +582,20 @@ export function OrderWizard({
setSelections(resetSels)
}
const editBasketItem = (idx: number) => {
const item = basketItems[idx]
if (!item) return
setBasketItems(prev => prev.filter((_, i) => i !== idx))
setSelections(item.selections)
setModuleQuantities(item.moduleQuantities)
setDeviceName(item.deviceName)
setSelectedBillingInterval(item.billingInterval)
}
const deleteBasketItem = (idx: number) => {
setBasketItems(prev => prev.filter((_, i) => i !== idx))
}
const handleSubmit = async () => {
if (isSubmitting) return
setIsSubmitting(true)
@@ -1371,12 +1385,38 @@ export function OrderWizard({
{basketItems.length > 0 && (
<div className="pt-4 border-t border-white/10 space-y-2">
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Warenkorb ({basketItems.length}):</p>
{basketItems.map((item, idx) => (
<div key={idx} className="flex justify-between text-xs bg-white/5 p-2 rounded border border-white/10">
<span className="text-white font-medium">{item.deviceName}</span>
<span className="text-slate-400 capitalize">{item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}</span>
</div>
))}
<div className="space-y-1.5">
{basketItems.map((item, idx) => (
<div key={idx} className="flex justify-between items-center text-xs bg-white/5 p-2 rounded border border-white/10">
<div className="flex flex-col">
<span className="text-white font-medium">{item.deviceName}</span>
<span className="text-[10px] text-slate-400 capitalize">{item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}</span>
</div>
<div className="flex items-center gap-1.5">
<Button
type="button"
variant="ghost"
size="icon"
className="w-7 h-7 hover:bg-white/10 text-slate-400 hover:text-white"
onClick={() => editBasketItem(idx)}
title="Gerät bearbeiten"
>
<Pencil className="w-3.5 h-3.5" />
</Button>
<Button
type="button"
variant="ghost"
size="icon"
className="w-7 h-7 hover:bg-white/10 text-destructive hover:text-red-400"
onClick={() => deleteBasketItem(idx)}
title="Gerät löschen"
>
<Trash2 className="w-3.5 h-3.5" />
</Button>
</div>
</div>
))}
</div>
</div>
)}
</CardContent>