feat(wizard): add confirmation dialog when clicking next with unsaved cash register selection
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user