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) {
onCustomerCreated();
}
resetForm();
} catch (err) {
handleError(err);
}
@@ -123,6 +124,20 @@ export function NewCustomerModal({onCustomerCreated}: Readonly<NewCustomerModalP
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 = () => (
<div className="space-y-4">
<div className="space-y-2">
@@ -227,6 +242,9 @@ export function NewCustomerModal({onCustomerCreated}: Readonly<NewCustomerModalP
return (
<>
<Dialog open={open} onOpenChange={() => {
if (!open) {
resetForm();
}
// Prevent closing on backdrop click - modal can only be closed explicitly
}}>
<DialogTrigger asChild>
@@ -257,7 +275,7 @@ export function NewCustomerModal({onCustomerCreated}: Readonly<NewCustomerModalP
{step === 1 ? (
<Button
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
</Button>