From edb5873e33b816ed4aa4de7c88bbb027ed0b1ed2 Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Tue, 11 Aug 2026 22:56:01 +0200
Subject: [PATCH] feat(wizard): add confirmation dialog when clicking next with
 unsaved cash register selection

---
 shop/components/wizard/summary-sidebar.tsx | 64 +++++++++++++++++++++-
 1 file changed, 63 insertions(+), 1 deletion(-)

diff --git a/shop/components/wizard/summary-sidebar.tsx b/shop/components/wizard/summary-sidebar.tsx
index 9919432..252d376 100644
--- a/shop/components/wizard/summary-sidebar.tsx
+++ b/shop/components/wizard/summary-sidebar.tsx
@@ -81,6 +81,26 @@ export function SummarySidebar({
   prevStep,
 }: SummarySidebarProps) {
   const [isOpen, setIsOpen] = React.useState(false)
+  const [isSavePromptOpen, setIsSavePromptOpen] = React.useState(false)
+
+  const handleNextClick = () => {
+    if (hasActiveSelection) {
+      setIsSavePromptOpen(true)
+    } else {
+      nextStep()
+    }
+  }
+
+  const handleSaveAndNext = async () => {
+    await addToBasket()
+    setIsSavePromptOpen(false)
+    nextStep()
+  }
+
+  const handleDiscardAndNext = () => {
+    setIsSavePromptOpen(false)
+    nextStep()
+  }
   const [selectedBasketIdx, setSelectedBasketIdx] = React.useState<number | null>(null)
 
   // When editing a basket item via pencil, open the modal for that item
@@ -340,7 +360,7 @@ export function SummarySidebar({
           </Button>
           <Button
             className="w-full h-10 text-sm font-bold bg-gradient-to-r from-blue-600 via-sky-500 to-cyan-400 hover:opacity-90 shadow-[0_0_20px_rgba(56,189,248,0.3)] transition-all"
-            onClick={nextStep}
+            onClick={handleNextClick}
             disabled={basketItems.length === 0 && isNextStepDisabled}
           >
             Weiter zu Schritt 4 <ChevronRight className="ml-1 w-4 h-4" />
@@ -351,6 +371,7 @@ export function SummarySidebar({
         </CardFooter>
       </Card>
 
+      {/* Modal 1: Name & Lizenznummer beim manuellen Anlegen/Bearbeiten */}
       <Dialog open={isOpen} onOpenChange={setIsOpen}>
         <DialogContent className="bg-slate-900 border border-slate-800 text-white rounded-2xl max-w-md p-6">
           <DialogHeader>
@@ -405,6 +426,47 @@ export function SummarySidebar({
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* Modal 2: Abfrage beim Weiterklicken ohne gespeicherte Kasse */}
+      <Dialog open={isSavePromptOpen} onOpenChange={setIsSavePromptOpen}>
+        <DialogContent className="bg-slate-900 border border-slate-800 text-white rounded-2xl max-w-md p-6">
+          <DialogHeader>
+            <DialogTitle className="text-lg font-bold text-white flex items-center gap-2">
+              <span>⚠️ Kasse noch nicht gespeichert</span>
+            </DialogTitle>
+            <DialogDescription className="text-slate-300 text-sm mt-2">
+              Sie haben aktuell eine Kassen-Konfiguration ausgewählt. Möchten Sie diese Kasse speichern und mit zur Bestellung hinzufügen?
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="flex flex-col sm:flex-row justify-end gap-2 mt-6">
+            <Button
+              type="button"
+              variant="ghost"
+              className="text-slate-400 hover:text-white text-xs"
+              onClick={() => setIsSavePromptOpen(false)}
+            >
+              Abbrechen
+            </Button>
+            {basketItems.length > 0 && (
+              <Button
+                type="button"
+                variant="outline"
+                className="border-white/20 text-slate-300 hover:bg-white/10 text-xs"
+                onClick={handleDiscardAndNext}
+              >
+                Nicht speichern & weiter
+              </Button>
+            )}
+            <Button
+              type="button"
+              className="bg-primary hover:bg-primary/90 text-white font-bold text-xs"
+              onClick={handleSaveAndNext}
+            >
+              💾 Kasse speichern & weiter
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   )
 }