Reset form state on dialog close in NewCustomerModal

- Add `resetForm` utility to restore initial modal state.
- Automatically reset form state when dialog closes or a new customer is created to improve UX.
This commit is contained in:
2025-07-11 20:36:51 +02:00
parent 14d089073b
commit 6aae06635d

View File

@@ -75,6 +75,7 @@ export function NewCustomerModal({onCustomerCreated}: Readonly<NewCustomerModalP
if (onCustomerCreated) { if (onCustomerCreated) {
onCustomerCreated(); onCustomerCreated();
} }
resetForm();
} catch (err) { } catch (err) {
handleError(err); handleError(err);
} }
@@ -123,6 +124,20 @@ export function NewCustomerModal({onCustomerCreated}: Readonly<NewCustomerModalP
setNotes(updated); setNotes(updated);
}; };
const resetForm = () => {
setStep(1); // Reset to step 1
setEmail("");
setName("");
setCompanyName("");
setPhoneNumbers([{note: "", number: ""}]);
setNotes([{text: ""}]);
setStreet("");
setZip("");
setCity("");
setMatches([]);
setShowDetailModal(false);
};
const renderStepOne = () => ( const renderStepOne = () => (
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
@@ -227,6 +242,9 @@ export function NewCustomerModal({onCustomerCreated}: Readonly<NewCustomerModalP
return ( return (
<> <>
<Dialog open={open} onOpenChange={() => { <Dialog open={open} onOpenChange={() => {
if (!open) {
resetForm();
}
// Prevent closing on backdrop click - modal can only be closed explicitly // Prevent closing on backdrop click - modal can only be closed explicitly
}}> }}>
<DialogTrigger asChild> <DialogTrigger asChild>
@@ -257,7 +275,7 @@ export function NewCustomerModal({onCustomerCreated}: Readonly<NewCustomerModalP
{step === 1 ? ( {step === 1 ? (
<Button <Button
onClick={() => setStep(2)} onClick={() => setStep(2)}
// disabled={!email || !name || !companyName || phoneNumbers.length === 0 || !phoneNumbers.some(p => p.number.trim()) || emailExists} disabled={!email || !name || !companyName || phoneNumbers.length === 0 || !phoneNumbers.some(p => p.number.trim()) || emailExists}
> >
Weiter Weiter
</Button> </Button>