feat(wizard): add confirmation dialog when clicking next with unsaved cash register selection

This commit is contained in:
DanielS
2026-08-11 22:56:01 +02:00
parent 9593cbdb79
commit edb5873e33

View File

@@ -81,6 +81,26 @@ export function SummarySidebar({
prevStep, prevStep,
}: SummarySidebarProps) { }: SummarySidebarProps) {
const [isOpen, setIsOpen] = React.useState(false) 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) const [selectedBasketIdx, setSelectedBasketIdx] = React.useState<number | null>(null)
// When editing a basket item via pencil, open the modal for that item // When editing a basket item via pencil, open the modal for that item
@@ -340,7 +360,7 @@ export function SummarySidebar({
</Button> </Button>
<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" 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} disabled={basketItems.length === 0 && isNextStepDisabled}
> >
Weiter zu Schritt 4 <ChevronRight className="ml-1 w-4 h-4" /> Weiter zu Schritt 4 <ChevronRight className="ml-1 w-4 h-4" />
@@ -351,6 +371,7 @@ export function SummarySidebar({
</CardFooter> </CardFooter>
</Card> </Card>
{/* Modal 1: Name & Lizenznummer beim manuellen Anlegen/Bearbeiten */}
<Dialog open={isOpen} onOpenChange={setIsOpen}> <Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogContent className="bg-slate-900 border border-slate-800 text-white rounded-2xl max-w-md p-6"> <DialogContent className="bg-slate-900 border border-slate-800 text-white rounded-2xl max-w-md p-6">
<DialogHeader> <DialogHeader>
@@ -405,6 +426,47 @@ export function SummarySidebar({
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </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> </div>
) )
} }