diff --git a/shop/components/order-wizard.tsx b/shop/components/order-wizard.tsx index 2f01dea..c557564 100644 --- a/shop/components/order-wizard.tsx +++ b/shop/components/order-wizard.tsx @@ -15,6 +15,7 @@ import { StepCustomer } from './wizard/step-customer' import { StepBilling } from './wizard/step-billing' import { StepSoftware } from './wizard/step-software' import { StepSummary } from './wizard/step-summary' +import { SummarySidebar } from './wizard/summary-sidebar' type CategorySelection = { productId: string | null // selected product in this category @@ -664,16 +665,9 @@ export function OrderWizard({ return (
- {/* Sticky Header — Stepper für Step 3, normaler Stepper für andere Steps */} - {step === 3 ? ( -
-
-

Schritt 3 von 4 — Software konfigurieren

-
- -
- ) : ( -
+ {/* Global Stepper for Steps 1, 2, 4 */} + {step !== 3 && ( +
)} @@ -739,44 +733,66 @@ export function OrderWizard({ initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }} - className="space-y-6" > - +
+ {/* LEFT: Sticky header (stepper) + scrollable categories */} +
+ {/* Sticky stepper header — only covers left column */} +
+

Schritt 3 von 4 — Software konfigurieren

+ +
+ + {/* Scrollable category content */} + +
+ + {/* RIGHT: Independent full-height sidebar column */} +
+ +
+
)} diff --git a/shop/components/wizard/step-software.tsx b/shop/components/wizard/step-software.tsx index 209e793..ad8de5f 100644 --- a/shop/components/wizard/step-software.tsx +++ b/shop/components/wizard/step-software.tsx @@ -11,7 +11,6 @@ import { Badge } from '@/components/ui/badge' import { ShoppingCart, Check, AlertCircle } from 'lucide-react' import * as Icons from 'lucide-react' import { Category, Product, CategorySelection } from '@/lib/types' -import { SummarySidebar } from './summary-sidebar' interface StepSoftwareProps { visibleCategories: Category[] @@ -26,30 +25,6 @@ interface StepSoftwareProps { selectedBillingInterval: 'one_time' | 'monthly' billingLabel: (interval: string) => string billingBadgeClass: (interval: string) => string - - // Sidebar props - oneTimeTotal: number - monthlyTotal: number - oneTimeNet: number - oneTimeTax: number - oneTimeGross: number - monthlyNet: number - monthlyTax: number - monthlyGross: number - updatePriceModifier: { label?: string } - allCategoriesFilled: boolean - productValidationErrors: string[] - basketItems: any[] - editingIdx: number | null - editBasketItem: (idx: number) => void - deleteBasketItem: (idx: number) => void - deviceName: string - setDeviceName: (name: string) => void - addToBasket: () => void - isNextStepDisabled: boolean - hasActiveSelection: boolean - nextStep: () => void - prevStep: () => void } function CategoryIcon({ icon, className }: { icon?: string | null; className?: string }) { @@ -71,44 +46,19 @@ export function StepSoftware({ selectedBillingInterval, billingLabel, billingBadgeClass, - oneTimeTotal, - monthlyTotal, - oneTimeNet, - oneTimeTax, - oneTimeGross, - monthlyNet, - monthlyTax, - monthlyGross, - updatePriceModifier, - allCategoriesFilled, - productValidationErrors, - basketItems, - editingIdx, - editBasketItem, - deleteBasketItem, - deviceName, - setDeviceName, - addToBasket, - isNextStepDisabled, - hasActiveSelection, - nextStep, - prevStep, }: StepSoftwareProps) { return ( -
- {/* Left: Category sections */} -
- - - - - Software wählen - - - Wählen Sie pro Kategorie mindestens einen Artikel aus. - - - + + + + + Software wählen + + + Wählen Sie pro Kategorie mindestens einen Artikel aus. + + + {visibleCategories.map((cat, idx) => { const catProducts = products.filter(p => { if (p.category_id !== cat.id) return false @@ -339,40 +289,7 @@ export function StepSoftware({
) })} - - -
- - {/* Right: Summary sidebar */} - -
+ + ) } diff --git a/shop/components/wizard/summary-sidebar.tsx b/shop/components/wizard/summary-sidebar.tsx index 671afcf..498524c 100644 --- a/shop/components/wizard/summary-sidebar.tsx +++ b/shop/components/wizard/summary-sidebar.tsx @@ -69,11 +69,10 @@ export function SummarySidebar({ prevStep, }: SummarySidebarProps) { return ( -
- - - Zusammenfassung - + + + Zusammenfassung + {visibleCategories.map(cat => { const sel = selections[cat.id] @@ -293,7 +292,6 @@ export function SummarySidebar({ Zurück zum Abrechnungsmodell - -
+ ) }