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

fix(wizard): connect direction state to step slide animations

Browse Source
This commit is contained in:
DanielS
2026-08-11 22:28:28 +02:00
parent 18228fa8b4
commit 6748a3ffad
1 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -94,6 +94,7 @@ export function OrderWizard({
const router = useRouter() const router = useRouter()
// Upgrade-Mode: starte direkt bei Schritt 3 (Software) // Upgrade-Mode: starte direkt bei Schritt 3 (Software)
const [step, setStep] = useState(upgradeMode ? 3 : (initialOrder ? 3 : 1)) const [step, setStep] = useState(upgradeMode ? 3 : (initialOrder ? 3 : 1))
const [direction, setDirection] = useState(1)
const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitting, setIsSubmitting] = useState(false)
const [selectedCompanyId, setSelectedCompanyId] = useState<string | null>( const [selectedCompanyId, setSelectedCompanyId] = useState<string | null>(
initialOrder?.company_id ?? (isAdmin ? 'all' : null) initialOrder?.company_id ?? (isAdmin ? 'all' : null)
@@ -938,9 +939,9 @@ export function OrderWizard({
{step === 1 && ( {step === 1 && (
<motion.div <motion.div
key="step1" key="step1"
initial={{ opacity: 0, x: 20 }} initial={{ opacity: 0, y: direction * 20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, x: -20 }} exit={{ opacity: 0, y: direction * -20 }}
className="space-y-6" className="space-y-6"
> >
<StepCustomer <StepCustomer
@@ -969,9 +970,9 @@ export function OrderWizard({
{step === 2 && ( {step === 2 && (
<motion.div <motion.div
key="step2" key="step2"
initial={{ opacity: 0, x: 20 }} initial={{ opacity: 0, y: direction * 20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, x: -20 }} exit={{ opacity: 0, y: direction * -20 }}
className="space-y-6" className="space-y-6"
> >
<StepBilling <StepBilling
@@ -989,9 +990,9 @@ export function OrderWizard({
{step === 3 && ( {step === 3 && (
<motion.div <motion.div
key="step3" key="step3"
initial={{ opacity: 0, x: 20 }} initial={{ opacity: 0, y: direction * 20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, x: -20 }} 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" 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"> <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 && ( {step === 4 && (
<motion.div <motion.div
key="step4" key="step4"
initial={{ opacity: 0, scale: 0.98 }} initial={{ opacity: 0, y: direction * 20 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.98 }} exit={{ opacity: 0, y: direction * -20 }}
className="h-[calc(100vh-140px)] overflow-hidden w-full" className="h-[calc(100vh-140px)] overflow-hidden w-full"
> >
<StepSummary <StepSummary