From 6748a3ffad7fc24973074f13cc9a14cfdb76344b Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Tue, 11 Aug 2026 22:28:28 +0200
Subject: [PATCH] fix(wizard): connect direction state to step slide animations

---
 shop/components/order-wizard.tsx | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/shop/components/order-wizard.tsx b/shop/components/order-wizard.tsx
index c69d035..4797616 100644
--- a/shop/components/order-wizard.tsx
+++ b/shop/components/order-wizard.tsx
@@ -94,6 +94,7 @@ export function OrderWizard({
   const router = useRouter()
   // Upgrade-Mode: starte direkt bei Schritt 3 (Software)
   const [step, setStep] = useState(upgradeMode ? 3 : (initialOrder ? 3 : 1))
+  const [direction, setDirection] = useState(1)
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [selectedCompanyId, setSelectedCompanyId] = useState<string | null>(
     initialOrder?.company_id ?? (isAdmin ? 'all' : null)
@@ -938,9 +939,9 @@ export function OrderWizard({
             {step === 1 && (
               <motion.div
                 key="step1"
-                initial={{ opacity: 0, x: 20 }}
-                animate={{ opacity: 1, x: 0 }}
-                exit={{ opacity: 0, x: -20 }}
+                initial={{ opacity: 0, y: direction * 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: direction * -20 }}
                 className="space-y-6"
               >
                 <StepCustomer
@@ -969,9 +970,9 @@ export function OrderWizard({
             {step === 2 && (
               <motion.div
                 key="step2"
-                initial={{ opacity: 0, x: 20 }}
-                animate={{ opacity: 1, x: 0 }}
-                exit={{ opacity: 0, x: -20 }}
+                initial={{ opacity: 0, y: direction * 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: direction * -20 }}
                 className="space-y-6"
               >
                 <StepBilling
@@ -989,9 +990,9 @@ export function OrderWizard({
         {step === 3 && (
           <motion.div
             key="step3"
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: -20 }}
+            initial={{ opacity: 0, y: direction * 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: direction * -20 }}
             className="h-[calc(100vh-160px)] overflow-hidden bg-slate-950/70 backdrop-blur-xl border border-slate-800/80 rounded-2xl shadow-2xl p-2"
           >
             <div className="grid grid-cols-1 lg:grid-cols-5 gap-4 h-full items-stretch">
@@ -1077,9 +1078,9 @@ export function OrderWizard({
         {step === 4 && (
           <motion.div
             key="step4"
-            initial={{ opacity: 0, scale: 0.98 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.98 }}
+            initial={{ opacity: 0, y: direction * 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: direction * -20 }}
             className="h-[calc(100vh-140px)] overflow-hidden w-full"
           >
             <StepSummary