refactor: replace generateTenantCode boolean with tenantPaymentMethod enum
- Replace generateTenantCode boolean field with tenantPaymentMethod enum ("none" | "iban" | "revolut")
- Update LocationEditForm to use dropdown select instead of toggle for payment method selection
- Consolidate multiple useState hooks into single formValues state object
- Change from defaultValue to controlled components with value/onChange pattern
- Add hidden inputs to preserve tenant data when payment method is not selected
- Update validation logic to check tenantPaymentMethod === "iban"
- Update ViewLocationCard to use new tenantPaymentMethod field
- Add Croatian translations for new dropdown options
This provides better scalability for adding future payment methods and improves form state management.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -23,36 +23,30 @@ export type LocationEditFormProps = {
|
||||
|
||||
export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMonth }) => {
|
||||
const initialState = { message: null, errors: {} };
|
||||
|
||||
const handleAction = updateOrAddLocation.bind(null, location?._id, location?.yearMonth ?? yearMonth);
|
||||
|
||||
const [state, dispatch] = useFormState(handleAction, initialState);
|
||||
const t = useTranslations("location-edit-form");
|
||||
const locale = useLocale();
|
||||
|
||||
// Track whether to generate 2D code for tenant (use persisted value from database)
|
||||
const [generateTenantCode, setGenerateTenantCode] = useState(
|
||||
location?.generateTenantCode ?? false
|
||||
);
|
||||
|
||||
// Track whether to automatically notify tenant (use persisted value from database)
|
||||
const [autoBillFwd, setautoBillFwd] = useState(
|
||||
location?.autoBillFwd ?? false
|
||||
);
|
||||
|
||||
// Track whether to automatically send rent notification (use persisted value from database)
|
||||
const [rentDueNotification, setrentDueNotification] = useState(
|
||||
location?.rentDueNotification ?? false
|
||||
);
|
||||
|
||||
// Track tenant field values for real-time validation
|
||||
const [tenantFields, setTenantFields] = useState({
|
||||
const [formValues, setFormValues] = useState({
|
||||
locationName: location?.name ?? "",
|
||||
tenantName: location?.tenantName ?? "",
|
||||
tenantStreet: location?.tenantStreet ?? "",
|
||||
tenantTown: location?.tenantTown ?? "",
|
||||
tenantEmail: location?.tenantEmail ?? "",
|
||||
tenantPaymentMethod: location?.tenantPaymentMethod ?? "none",
|
||||
autoBillFwd: location?.autoBillFwd ?? false,
|
||||
billFwdStrategy: location?.billFwdStrategy ?? "when-payed",
|
||||
rentDueNotification: location?.rentDueNotification ?? false,
|
||||
rentAmount: location?.rentAmount ?? "",
|
||||
rentDueDay: location?.rentDueDay ?? 1,
|
||||
});
|
||||
|
||||
const handleTenantFieldChange = (field: keyof typeof tenantFields, value: string) => {
|
||||
setTenantFields(prev => ({ ...prev, [field]: value }));
|
||||
const handleInputChange = (field: keyof typeof formValues, value: string | boolean | number) => {
|
||||
setFormValues(prev => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
let { year, month } = location ? location.yearMonth : yearMonth;
|
||||
@@ -69,7 +63,14 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
||||
}
|
||||
<fieldset className="fieldset mt-2 p-2">
|
||||
<legend className="fieldset-legend font-semibold uppercase">{t("location-name-legend")}</legend>
|
||||
<input id="locationName" name="locationName" type="text" placeholder={t("location-name-placeholder")} className="input input-bordered w-full placeholder:text-gray-600" defaultValue={location?.name ?? ""} />
|
||||
<input id="locationName"
|
||||
name="locationName"
|
||||
type="text"
|
||||
placeholder={t("location-name-placeholder")}
|
||||
className="input input-bordered w-full placeholder:text-gray-600"
|
||||
value={formValues.locationName}
|
||||
onChange={(e) => handleInputChange("locationName", e.target.value)}
|
||||
/>
|
||||
<div id="status-error" aria-live="polite" aria-atomic="true">
|
||||
{state.errors?.locationName &&
|
||||
state.errors.locationName.map((error: string) => (
|
||||
@@ -79,25 +80,24 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
||||
))}
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
|
||||
<legend className="fieldset-legend font-semibold uppercase">{t("tenant-payment-instructions-legend")}</legend>
|
||||
<InfoBox className="p-1 mb-1">{t("tenant-payment-instructions-code-info")}</InfoBox>
|
||||
|
||||
<InfoBox className="p-1 pt-0 mb-1">{t("tenant-payment-instructions-code-info")}</InfoBox>
|
||||
|
||||
<fieldset className="fieldset">
|
||||
<label className="label cursor-pointer justify-start gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="generateTenantCode"
|
||||
className="toggle toggle-primary"
|
||||
checked={generateTenantCode}
|
||||
onChange={(e) => setGenerateTenantCode(e.target.checked)}
|
||||
/>
|
||||
<legend className="fieldset-legend">{t("tenant-payment-instructions-toggle-label")}</legend>
|
||||
</label>
|
||||
<fieldset className="fieldset mt-2 p-2">
|
||||
<legend className="fieldset-legend">{t("tenant-payment-instructions-method--legend")}</legend>
|
||||
<select defaultValue={formValues.tenantPaymentMethod} className="select input-bordered w-full" name="tenantPaymentMethod" onChange={(e) => handleInputChange("tenantPaymentMethod", e.target.value)}>
|
||||
<option value="none">{t("tenant-payment-instructions-method--none")}</option>
|
||||
<option value="iban">{t("tenant-payment-instructions-method--iban")}</option>
|
||||
<option value="revolut">{t("tenant-payment-instructions-method--revolut")}</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
|
||||
{generateTenantCode && (
|
||||
{ formValues.tenantPaymentMethod === "iban" ? (
|
||||
<>
|
||||
<div className="divider mt-4 mb-2 font-bold uppercase">{t("iban-payment--form-title")}</div>
|
||||
<div className="form-control w-full">
|
||||
<label className="label">
|
||||
<span className="label-text">{t("iban-payment--tenant-name-label")}</span>
|
||||
@@ -109,8 +109,8 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
||||
maxLength={30}
|
||||
placeholder={t("iban-payment--tenant-name-placeholder")}
|
||||
className="input input-bordered w-full placeholder:text-gray-600"
|
||||
defaultValue={location?.tenantName ?? ""}
|
||||
onChange={(e) => handleTenantFieldChange("tenantName", e.target.value)}
|
||||
defaultValue={formValues.tenantName}
|
||||
onChange={(e) => handleInputChange("tenantName", e.target.value)}
|
||||
/>
|
||||
<div id="tenantName-error" aria-live="polite" aria-atomic="true">
|
||||
{state.errors?.tenantName &&
|
||||
@@ -133,8 +133,8 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
||||
maxLength={27}
|
||||
placeholder={t("iban-payment--tenant-street-placeholder")}
|
||||
className="input input-bordered w-full placeholder:text-gray-600"
|
||||
defaultValue={location?.tenantStreet ?? ""}
|
||||
onChange={(e) => handleTenantFieldChange("tenantStreet", e.target.value)}
|
||||
defaultValue={formValues.tenantStreet}
|
||||
onChange={(e) => handleInputChange("tenantStreet", e.target.value)}
|
||||
/>
|
||||
<div id="tenantStreet-error" aria-live="polite" aria-atomic="true">
|
||||
{state.errors?.tenantStreet &&
|
||||
@@ -157,8 +157,8 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
||||
maxLength={27}
|
||||
placeholder={t("iban-payment--tenant-town-placeholder")}
|
||||
className="input input-bordered w-full placeholder:text-gray-600"
|
||||
defaultValue={location?.tenantTown ?? ""}
|
||||
onChange={(e) => handleTenantFieldChange("tenantTown", e.target.value)}
|
||||
defaultValue={formValues.tenantTown}
|
||||
onChange={(e) => handleInputChange("tenantTown", e.target.value)}
|
||||
/>
|
||||
<div id="tenantTown-error" aria-live="polite" aria-atomic="true">
|
||||
{state.errors?.tenantTown &&
|
||||
@@ -171,10 +171,31 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
||||
</div>
|
||||
<InfoBox className="p-1 mb-1">{t("tenant--payment-instructions-note")}</InfoBox>
|
||||
</>
|
||||
)}
|
||||
) : // ELSE include hidden inputs to preserve existing values
|
||||
<>
|
||||
<input
|
||||
id="tenantName"
|
||||
name="tenantName"
|
||||
type="hidden"
|
||||
maxLength={30}
|
||||
defaultValue={formValues.tenantName}
|
||||
/>
|
||||
<input
|
||||
id="tenantStreet"
|
||||
name="tenantStreet"
|
||||
type="hidden"
|
||||
className="input input-bordered w-full placeholder:text-gray-600"
|
||||
defaultValue={formValues.tenantStreet}
|
||||
/>
|
||||
<input
|
||||
id="tenantTown"
|
||||
name="tenantTown"
|
||||
type="hidden"
|
||||
defaultValue={formValues.tenantTown}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
</fieldset>
|
||||
|
||||
|
||||
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
|
||||
<legend className="fieldset-legend font-semibold uppercase">{t("auto-utility-bill-forwarding-legend")}</legend>
|
||||
<InfoBox className="p-1 mb-1">{t("auto-utility-bill-forwarding-info")}</InfoBox>
|
||||
@@ -186,17 +207,17 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
||||
type="checkbox"
|
||||
name="autoBillFwd"
|
||||
className="toggle toggle-primary"
|
||||
checked={autoBillFwd}
|
||||
onChange={(e) => setautoBillFwd(e.target.checked)}
|
||||
checked={formValues.autoBillFwd}
|
||||
onChange={(e) => handleInputChange("autoBillFwd", e.target.checked)}
|
||||
/>
|
||||
<legend className="fieldset-legend">{t("auto-utility-bill-forwarding-toggle-label")}</legend>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
{autoBillFwd && (
|
||||
{formValues.autoBillFwd && (
|
||||
<fieldset className="fieldset mt-2 p-2">
|
||||
<legend className="fieldset-legend">{t("utility-bill-forwarding-strategy-label")}</legend>
|
||||
<select defaultValue={location?.billFwdStrategy ?? "when-payed"} className="select input-bordered w-full" name="billFwdStrategy">
|
||||
<select defaultValue={formValues.billFwdStrategy} className="select input-bordered w-full" name="billFwdStrategy">
|
||||
<option value="when-payed">{t("utility-bill-forwarding-when-payed")}</option>
|
||||
<option value="when-attached">{t("utility-bill-forwarding-when-attached")}</option>
|
||||
</select>
|
||||
@@ -215,18 +236,22 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
||||
type="checkbox"
|
||||
name="rentDueNotification"
|
||||
className="toggle toggle-primary"
|
||||
checked={rentDueNotification}
|
||||
onChange={(e) => setrentDueNotification(e.target.checked)}
|
||||
checked={formValues.rentDueNotification}
|
||||
onChange={(e) => handleInputChange("rentDueNotification", e.target.checked)}
|
||||
/>
|
||||
<legend className="fieldset-legend">{t("auto-rent-notification-toggle-label")}</legend>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
{rentDueNotification && (
|
||||
{formValues.rentDueNotification && (
|
||||
<>
|
||||
<fieldset className="fieldset mt-2 p-2">
|
||||
<legend className="fieldset-legend">{t("rent-due-day-label")}</legend>
|
||||
<select defaultValue={location?.rentDueDay ?? 1} className="select input-bordered w-full" name="rentDueDay">
|
||||
<select defaultValue={formValues.rentDueDay}
|
||||
className="select input-bordered w-full"
|
||||
name="rentDueDay"
|
||||
onChange={(e) => handleInputChange("rentDueDay", parseInt(e.target.value,10))
|
||||
}>
|
||||
{Array.from({ length: 28 }, (_, i) => i + 1).map(day => (
|
||||
<option key={day} value={day}>{day}</option>
|
||||
))}
|
||||
@@ -242,7 +267,8 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
||||
step="0.01"
|
||||
placeholder={t("rent-amount-placeholder")}
|
||||
className="input input-bordered w-full placeholder:text-gray-600 text-right"
|
||||
defaultValue={location?.rentAmount ?? ""}
|
||||
defaultValue={formValues.rentAmount}
|
||||
onChange={(e) => handleInputChange("rentAmount", parseFloat(e.target.value))}
|
||||
/>
|
||||
<div id="rentAmount-error" aria-live="polite" aria-atomic="true">
|
||||
{state.errors?.rentAmount &&
|
||||
@@ -257,7 +283,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
||||
)}
|
||||
</fieldset>
|
||||
|
||||
{(autoBillFwd || rentDueNotification) && (
|
||||
{(formValues.autoBillFwd || formValues.rentDueNotification) && (
|
||||
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
|
||||
<legend className="fieldset-legend font-semibold uppercase">{t("tenant-email-legend")}</legend>
|
||||
<input
|
||||
@@ -266,8 +292,8 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
||||
type="email"
|
||||
placeholder={t("tenant-email-placeholder")}
|
||||
className="input input-bordered w-full placeholder:text-gray-600"
|
||||
defaultValue={location?.tenantEmail ?? ""}
|
||||
onChange={(e) => handleTenantFieldChange("tenantEmail", e.target.value)}
|
||||
defaultValue={formValues.tenantEmail}
|
||||
onChange={(e) => handleInputChange("tenantEmail", e.target.value)}
|
||||
/>
|
||||
<div id="tenantEmail-error" aria-live="polite" aria-atomic="true">
|
||||
{state.errors?.tenantEmail &&
|
||||
|
||||
Reference in New Issue
Block a user