From 4e82146ab7ea70ba2d0fe829fc9db515d1f9c073 Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Fri, 10 Jul 2026 15:03:55 +0200
Subject: [PATCH] feat(wizard): replace browser alerts with modern custom UI
 toasts

---
 shop/components/order-wizard.tsx | 39 ++++++++++++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/shop/components/order-wizard.tsx b/shop/components/order-wizard.tsx
index 9e7ceeb..ccf269c 100644
--- a/shop/components/order-wizard.tsx
+++ b/shop/components/order-wizard.tsx
@@ -149,6 +149,14 @@ export function OrderWizard({
   })
   const [deviceName, setDeviceName] = useState<string>('')
   const [editingIdx, setEditingIdx] = useState<number | null>(null)
+  const [toast, setToast] = useState<{ message: string; type: 'error' | 'success' } | null>(null)
+
+  useEffect(() => {
+    if (toast) {
+      const timer = setTimeout(() => setToast(null), 5000)
+      return () => clearTimeout(timer)
+    }
+  }, [toast])
 
   // Partner-Profil (Fallback)
   const [customerData] = useState<Partial<Profile>>(initialProfile || {})
@@ -602,7 +610,7 @@ export function OrderWizard({
         bank_iban: '', bank_bic: '', bank_name: '', bank_owner: '',
       })
     } catch (e: any) {
-      alert(`Fehler beim Anlegen des Kunden: ${e.message || 'Unbekannter Fehler'}`)
+      setToast({ message: `Fehler beim Anlegen des Kunden: ${e.message || 'Unbekannter Fehler'}`, type: 'error' })
     } finally {
       setIsCreatingCustomer(false)
     }
@@ -723,7 +731,7 @@ export function OrderWizard({
       }
     } catch (error: any) {
       console.error(error)
-      alert(error?.message || 'Fehler bei der Bestellung. Bitte versuchen Sie es erneut.')
+      setToast({ message: error?.message || 'Fehler bei der Bestellung. Bitte versuchen Sie es erneut.', type: 'error' })
       setIsSubmitting(false)
     }
   }
@@ -1804,6 +1812,33 @@ export function OrderWizard({
           </motion.div>
         )}
       </AnimatePresence>
+
+      {/* Custom Toast Notification */}
+      <AnimatePresence>
+        {toast && (
+          <motion.div
+            initial={{ opacity: 0, y: 50, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 20, scale: 0.95 }}
+            className={`fixed bottom-5 right-5 z-50 flex items-center gap-3 px-4 py-3 rounded-xl border shadow-lg backdrop-blur-md transition-all duration-300 max-w-md ${
+              toast.type === 'error'
+                ? 'bg-red-500/20 border-red-500/40 text-red-200'
+                : 'bg-green-500/20 border-green-500/40 text-green-200'
+            }`}
+          >
+            <AlertCircle className={`w-5 h-5 shrink-0 ${toast.type === 'error' ? 'text-red-400' : 'text-green-400'}`} />
+            <p className="text-sm font-medium">{toast.message}</p>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="w-5 h-5 ml-auto text-slate-400 hover:text-white"
+              onClick={() => setToast(null)}
+            >
+              ✕
+            </Button>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   )
 }