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

fix: loop and render all basket items in wizard summary screen
Some checks failed
Staging Build / build (push) Failing after 29s
Details

Browse Source
This commit is contained in:
DanielS
2026-07-09 23:33:16 +02:00
parent 2c572c5bd4
commit 387ba19802
1 changed files with 78 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -622,6 +622,12 @@ export function OrderWizard({
} }
const finalItemsToShow = basketItems.length > 0
? basketItems
: (allCategoriesFilled && productValidationErrors.length === 0
? [{ deviceName: deviceName || 'Kasse 1', selections, moduleQuantities, billingInterval: selectedBillingInterval }]
: []);
return ( return (
<div className="max-w-5xl mx-auto py-12 px-4"> <div className="max-w-5xl mx-auto py-12 px-4">
{/* Progress Stepper */} {/* Progress Stepper */}
@@ -1426,9 +1432,16 @@ export function OrderWizard({
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-6 text-left"> <CardContent className="space-y-6 text-left">
<div className="p-4 rounded-lg bg-white/5 space-y-4"> <div className="p-4 rounded-lg bg-white/5 space-y-6">
{finalItemsToShow.map((item, itemIdx) => (
<div key={itemIdx} className="space-y-3 border-b border-white/10 pb-4 last:border-0 last:pb-0">
<div className="flex justify-between items-center bg-white/5 p-2 rounded">
<span className="text-white font-bold text-sm">Gerät: {item.deviceName}</span>
<span className="text-xs text-slate-400 capitalize">{item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}</span>
</div>
{visibleCategories.map(cat => { {visibleCategories.map(cat => {
const sel = selections[cat.id] const sel = item.selections[cat.id]
const selectedProds: Product[] = [] const selectedProds: Product[] = []
if (cat.allow_multiselect && sel?.productIds) { if (cat.allow_multiselect && sel?.productIds) {
sel.productIds.forEach(pId => { sel.productIds.forEach(pId => {
@@ -1442,14 +1455,13 @@ export function OrderWizard({
if (selectedProds.length === 0) return null if (selectedProds.length === 0) return null
// Sort selected products by price to determine which ones are free
const sortedProds = [...selectedProds].sort((a, b) => a.base_price - b.base_price) const sortedProds = [...selectedProds].sort((a, b) => a.base_price - b.base_price)
const freeLimit = cat.allow_multiselect ? cat.free_items_limit : 0 const freeLimit = cat.allow_multiselect ? cat.free_items_limit : 0
return ( return (
<div key={cat.id} className="space-y-2 border-b border-white/5 pb-3 last:border-0 last:pb-0"> <div key={cat.id} className="space-y-1 pl-2">
<div className="flex items-center gap-2 text-slate-400 font-semibold text-sm"> <div className="text-slate-400 font-semibold text-xs flex items-center gap-1">
<CategoryIcon icon={cat.icon} className="w-4 h-4 text-primary" /> <CategoryIcon icon={cat.icon} className="w-3.5 h-3.5 text-primary" />
<span>{cat.name}</span> <span>{cat.name}</span>
</div> </div>
{sortedProds.map((prod, idx) => { {sortedProds.map((prod, idx) => {
@@ -1459,27 +1471,26 @@ export function OrderWizard({
Number(actualPrice) + Number(actualPrice) +
(sel?.moduleIds?.reduce((acc, mId) => { (sel?.moduleIds?.reduce((acc, mId) => {
const mod = prod.modules?.find(m => m.id === mId) const mod = prod.modules?.find(m => m.id === mId)
const qty = moduleQuantities[mId] || 1 const qty = item.moduleQuantities[mId] || 1
return acc + (Number(mod?.price ?? 0) * qty) return acc + (Number(mod?.price ?? 0) * qty)
}, 0) || 0) }, 0) || 0)
return ( return (
<div key={prod.id} className="pl-4"> <div key={prod.id} className="pl-3">
<div className="flex justify-between font-bold text-base text-white"> <div className="flex justify-between font-semibold text-sm text-white">
<span> <span>
{prod.name} {isFree && <span className="text-[10px] text-green-400 font-semibold">(Frei)</span>} {prod.name} {isFree && <span className="text-[10px] text-green-400 font-semibold">(Frei)</span>}
</span> </span>
<span> <span>
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(catTotal)} {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(catTotal)}
{' '}<span className="text-sm font-normal text-slate-400">{billingLabel(prod.billing_interval)}</span>
</span> </span>
</div> </div>
{sel?.moduleIds && sel.moduleIds.length > 0 && ( {sel?.moduleIds && sel.moduleIds.length > 0 && (
<p className="text-sm text-slate-300 mt-1"> <p className="text-xs text-slate-400 mt-0.5">
Module: {sel.moduleIds Module: {sel.moduleIds
.map(id => { .map(id => {
const mod = prod.modules?.find(m => m.id === id) const mod = prod.modules?.find(m => m.id === id)
const qty = moduleQuantities[id] || 1 const qty = item.moduleQuantities[id] || 1
return mod ? `${mod.name}${mod.has_quantity ? ` (x${qty})` : ''}` : '' return mod ? `${mod.name}${mod.has_quantity ? ` (x${qty})` : ''}` : ''
}) })
.filter(Boolean) .filter(Boolean)
@@ -1492,6 +1503,8 @@ export function OrderWizard({
</div> </div>
) )
})} })}
</div>
))}
<Separator className="bg-white/10" /> <Separator className="bg-white/10" />
<div className="text-sm text-slate-300 space-y-1"> <div className="text-sm text-slate-300 space-y-1">
{selectedEndCustomer ? ( {selectedEndCustomer ? (