feat: split step-3 into independent left/right grid columns with sticky local stepper

2026-07-10 16:10:25 +02:00
parent d37a6b4348
commit 0b4755d438
3 changed files with 81 additions and 150 deletions
--- 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 (
    <div className="max-w-5xl mx-auto px-4">
-      {/* Sticky Header — Stepper für Step 3, normaler Stepper für andere Steps */}
-      {step === 3 ? (
-        <div className="sticky top-0 z-30 w-full bg-slate-950/80 backdrop-blur-md pt-6 pb-4 border-b border-white/5 mb-6">
-          <div className="text-center mb-4">
-            <p className="text-slate-400 text-sm">Schritt 3 von 4 — Software konfigurieren</p>
-          </div>
-          <ProgressStepper step={step} basketItemsCount={basketItems.length} />
-        </div>
-      ) : (
-        <div className="pt-12">
+      {/* Global Stepper for Steps 1, 2, 4 */}
+      {step !== 3 && (
+        <div className="pt-12 pb-6">
          <ProgressStepper step={step} basketItemsCount={basketItems.length} />
        </div>
      )}
@@ -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"
          >
-            <StepSoftware
-              visibleCategories={visibleCategories}
-              products={products}
-              selections={selections}
-              selectProduct={selectProduct}
-              isProductDisabled={isProductDisabled}
-              isModuleDisabled={isModuleDisabled}
-              toggleModule={toggleModule}
-              moduleQuantities={moduleQuantities}
-              setModuleQuantities={setModuleQuantities}
-              selectedBillingInterval={selectedBillingInterval}
-              billingLabel={billingLabel}
-              billingBadgeClass={billingBadgeClass}
-              oneTimeTotal={oneTimeTotal}
-              monthlyTotal={monthlyTotal}
-              oneTimeNet={oneTimeNet}
-              oneTimeTax={oneTimeTax}
-              oneTimeGross={oneTimeGross}
-              monthlyNet={monthlyNet}
-              monthlyTax={monthlyTax}
-              monthlyGross={monthlyGross}
-              updatePriceModifier={updatePriceModifier}
-              allCategoriesFilled={allCategoriesFilled}
-              productValidationErrors={productValidationErrors}
-              basketItems={basketItems}
-              editingIdx={editingIdx}
-              editBasketItem={editBasketItem}
-              deleteBasketItem={deleteBasketItem}
-              deviceName={deviceName}
-              setDeviceName={setDeviceName}
-              addToBasket={addToBasket}
-              isNextStepDisabled={isNextStepDisabled}
-              hasActiveSelection={hasActiveSelection}
-              nextStep={nextStep}
-              prevStep={prevStep}
-            />
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
+              {/* LEFT: Sticky header (stepper) + scrollable categories */}
+              <div className="lg:col-span-2 space-y-0">
+                {/* Sticky stepper header — only covers left column */}
+                <div className="sticky top-0 z-20 bg-slate-950/80 backdrop-blur-md pb-4 pt-6 border-b border-white/5 mb-6">
+                  <p className="text-center text-slate-400 text-sm mb-4">Schritt 3 von 4 — Software konfigurieren</p>
+                  <ProgressStepper step={step} basketItemsCount={basketItems.length} />
+                </div>
+
+                {/* Scrollable category content */}
+                <StepSoftware
+                  visibleCategories={visibleCategories}
+                  products={products}
+                  selections={selections}
+                  selectProduct={selectProduct}
+                  isProductDisabled={isProductDisabled}
+                  isModuleDisabled={isModuleDisabled}
+                  toggleModule={toggleModule}
+                  moduleQuantities={moduleQuantities}
+                  setModuleQuantities={setModuleQuantities}
+                  selectedBillingInterval={selectedBillingInterval}
+                  billingLabel={billingLabel}
+                  billingBadgeClass={billingBadgeClass}
+                />
+              </div>
+
+              {/* RIGHT: Independent full-height sidebar column */}
+              <div className="lg:col-span-1 sticky top-6">
+                <SummarySidebar
+                  visibleCategories={visibleCategories}
+                  selections={selections}
+                  products={products}
+                  moduleQuantities={moduleQuantities}
+                  billingLabel={billingLabel}
+                  oneTimeTotal={oneTimeTotal}
+                  monthlyTotal={monthlyTotal}
+                  oneTimeNet={oneTimeNet}
+                  oneTimeTax={oneTimeTax}
+                  oneTimeGross={oneTimeGross}
+                  monthlyNet={monthlyNet}
+                  monthlyTax={monthlyTax}
+                  monthlyGross={monthlyGross}
+                  updatePriceModifier={updatePriceModifier}
+                  allCategoriesFilled={allCategoriesFilled}
+                  productValidationErrors={productValidationErrors}
+                  basketItems={basketItems}
+                  editingIdx={editingIdx}
+                  editBasketItem={editBasketItem}
+                  deleteBasketItem={deleteBasketItem}
+                  deviceName={deviceName}
+                  setDeviceName={setDeviceName}
+                  addToBasket={addToBasket}
+                  isNextStepDisabled={isNextStepDisabled}
+                  hasActiveSelection={hasActiveSelection}
+                  nextStep={nextStep}
+                  prevStep={prevStep}
+                />
+              </div>
+            </div>
          </motion.div>
        )}