From f68d67de437f94fd2af55ba17e913a33a6eee15f Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Thu, 27 Aug 2026 00:32:09 +0200
Subject: [PATCH] feat(wizard): add showValidationWarning prop to summary
 sidebar

---
 shop/components/order-wizard.tsx           | 27 ++++++++++++++--------
 shop/components/wizard/step-software.tsx   |  2 +-
 shop/components/wizard/summary-sidebar.tsx | 13 ++++++++++-
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/shop/components/order-wizard.tsx b/shop/components/order-wizard.tsx
index c133fc5..8e43404 100644
--- a/shop/components/order-wizard.tsx
+++ b/shop/components/order-wizard.tsx
@@ -175,6 +175,7 @@ export function OrderWizard({
   const [orderNotes, setOrderNotes] = useState<string>('')
   const [toast, setToast] = useState<{ message: string; type: 'error' | 'success' } | null>(null)
   const [activeCategoryId, setActiveCategoryId] = useState<string | null>(null)
+  const [showValidationWarning, setShowValidationWarning] = useState(false)
 
   useEffect(() => {
     if (toast) {
@@ -545,14 +546,21 @@ export function OrderWizard({
   }
 
   const nextStep = () => {
-    if (step === 3 && allCategoriesFilled && productValidationErrors.length === 0) {
-      const isDirtyNewDevice = (deviceName.trim() !== '' || licenseNumber.trim() !== '' || Object.values(moduleQuantities).some(q => q > 0)) && editingIdx === null
-      if (editingIdx !== null) {
-        addToBasket()
-      } else if (basketItems.length === 0 && hasActiveSelection) {
-        addToBasket()
-      } else if (isDirtyNewDevice && hasActiveSelection) {
-        addToBasket()
+    if (step === 3) {
+      if (isNextStepDisabled && basketItems.length === 0) {
+        setShowValidationWarning(true)
+        return
+      }
+      setShowValidationWarning(false)
+      if (allCategoriesFilled && productValidationErrors.length === 0) {
+        const isDirtyNewDevice = (deviceName.trim() !== '' || licenseNumber.trim() !== '' || Object.values(moduleQuantities).some(q => q > 0)) && editingIdx === null
+        if (editingIdx !== null) {
+          addToBasket()
+        } else if (basketItems.length === 0 && hasActiveSelection) {
+          addToBasket()
+        } else if (isDirtyNewDevice && hasActiveSelection) {
+          addToBasket()
+        }
       }
     }
     setDirection(1)
@@ -945,7 +953,7 @@ export function OrderWizard({
                       onClick={() => setActiveCategoryId(cat.id)}
                       className={`flex items-center gap-2.5 p-2.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${
                         isMissingRequired
-                          ? 'animate-eye-catcher bg-red-500/10 border-red-500 text-red-400 font-bold shadow-[0_0_20px_rgba(239,68,68,0.4)]'
+                          ? 'bg-red-500/10 border-red-500/50 text-red-400 font-bold'
                           : isActive
                             ? 'bg-primary/10 border-primary text-white shadow-[0_0_15px_rgba(59,130,246,0.2)]'
                             : 'bg-slate-900/50 border-white/5 text-slate-400 hover:bg-slate-900 hover:border-white/20 hover:text-white'
@@ -1124,6 +1132,7 @@ export function OrderWizard({
                     addToBasket={addToBasket}
                     isNextStepDisabled={isNextStepDisabled}
                     hasActiveSelection={hasActiveSelection}
+                    showValidationWarning={showValidationWarning}
                     nextStep={nextStep}
                     prevStep={prevStep}
                   />
diff --git a/shop/components/wizard/step-software.tsx b/shop/components/wizard/step-software.tsx
index ea63193..0c7be32 100644
--- a/shop/components/wizard/step-software.tsx
+++ b/shop/components/wizard/step-software.tsx
@@ -93,7 +93,7 @@ export function StepSoftware({
               return (
                 <div className={`flex items-center gap-3 p-4 rounded-xl border transition-all ${
                   isMissingRequired
-                    ? 'animate-eye-catcher bg-red-500/10 border-red-500 text-red-400 font-bold'
+                    ? 'bg-red-500/10 border-red-500/50 text-red-400 font-bold'
                     : 'bg-white/5 border-white/10'
                 }`}>
                   <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
diff --git a/shop/components/wizard/summary-sidebar.tsx b/shop/components/wizard/summary-sidebar.tsx
index 420346a..29b7acc 100644
--- a/shop/components/wizard/summary-sidebar.tsx
+++ b/shop/components/wizard/summary-sidebar.tsx
@@ -45,6 +45,7 @@ interface SummarySidebarProps {
   addToBasket: () => void
   isNextStepDisabled: boolean
   hasActiveSelection: boolean
+  showValidationWarning?: boolean
   nextStep: () => void
   prevStep: () => void
 }
@@ -77,6 +78,7 @@ export function SummarySidebar({
   addToBasket,
   isNextStepDisabled,
   hasActiveSelection,
+  showValidationWarning = false,
   nextStep,
   prevStep,
 }: SummarySidebarProps) {
@@ -235,7 +237,7 @@ export function SummarySidebar({
                 <p>{updatePriceModifier.label}</p>
               </div>
             )}
-            {!allCategoriesFilled && (
+            {!allCategoriesFilled && showValidationWarning && (
               <div className="text-xs text-red-400 flex items-start gap-2 bg-red-500/10 p-3 rounded-xl border border-red-500/40 animate-eye-catcher">
                 <AlertCircle className="w-4 h-4 shrink-0 text-red-400 mt-0.5" />
                 <div>
@@ -244,6 +246,15 @@ export function SummarySidebar({
                 </div>
               </div>
             )}
+            {!allCategoriesFilled && !showValidationWarning && (
+              <div className="text-xs text-slate-400 flex items-start gap-2 bg-slate-900/50 p-2.5 rounded-xl border border-white/5">
+                <AlertCircle className="w-4 h-4 shrink-0 text-slate-500 mt-0.5" />
+                <div>
+                  <p className="font-semibold text-[11px] text-slate-300">Pflichtkategorien beachten</p>
+                  <p className="text-[11px] text-slate-400">Bitte wählen Sie für die Rot markierten Kategorien ein Produkt aus.</p>
+                </div>
+              </div>
+            )}
             {productValidationErrors.map((err, errIdx) => (
               <p key={errIdx} className="text-xs text-red-400 flex items-center gap-1 bg-red-500/10 p-2 rounded-lg border border-red-500/20">
                 <AlertCircle className="w-3.5 h-3.5 shrink-0 text-red-400" />