Add automatic rent notification feature to LocationEditForm
- Add rentDueNotification toggle to enable automatic rent notifications - Add rentDueDay selector (1-28) for specifying when rent is due - Extract tenant email to independent section shown when either autoBillFwd or rentDueNotification is enabled - Update email validation to be mandatory when any automatic notification is active - Update database schema to persist rentDueNotification and rentDueDay fields - Add all database operations to handle new fields with proper defaults - Add localization strings for English and Croatian 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Knee Cola
@@ -21,6 +21,8 @@ export type State = {
|
||||
autoBillFwd?: string[];
|
||||
tenantEmail?: string[];
|
||||
billFwdStrategy?: string[];
|
||||
rentDueNotification?: string[];
|
||||
rentDueDay?: string[];
|
||||
};
|
||||
message?:string | null;
|
||||
};
|
||||
@@ -39,6 +41,8 @@ const FormSchema = (t:IntlTemplateFn) => z.object({
|
||||
autoBillFwd: z.boolean().optional().nullable(),
|
||||
tenantEmail: z.string().email(t("tenant-email-invalid")).optional().or(z.literal("")).nullable(),
|
||||
billFwdStrategy: z.enum(["when-payed", "when-attached"]).optional().nullable(),
|
||||
rentDueNotification: z.boolean().optional().nullable(),
|
||||
rentDueDay: z.coerce.number().min(1).max(31).optional().nullable(),
|
||||
addToSubsequentMonths: z.boolean().optional().nullable(),
|
||||
updateScope: z.enum(["current", "subsequent", "all"]).optional().nullable(),
|
||||
})
|
||||
@@ -64,7 +68,7 @@ const FormSchema = (t:IntlTemplateFn) => z.object({
|
||||
path: ["tenantLastName"],
|
||||
})
|
||||
.refine((data) => {
|
||||
if (data.autoBillFwd) {
|
||||
if (data.autoBillFwd || data.rentDueNotification) {
|
||||
return !!data.tenantEmail && data.tenantEmail.trim().length > 0;
|
||||
}
|
||||
return true;
|
||||
@@ -95,6 +99,8 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
|
||||
autoBillFwd: formData.get('autoBillFwd') === 'on',
|
||||
tenantEmail: formData.get('tenantEmail') || null,
|
||||
billFwdStrategy: formData.get('billFwdStrategy') as "when-payed" | "when-attached" | undefined,
|
||||
rentDueNotification: formData.get('rentDueNotification') === 'on',
|
||||
rentDueDay: formData.get('rentDueDay') || null,
|
||||
addToSubsequentMonths: formData.get('addToSubsequentMonths') === 'on',
|
||||
updateScope: formData.get('updateScope') as "current" | "subsequent" | "all" | undefined,
|
||||
});
|
||||
@@ -116,6 +122,8 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
|
||||
autoBillFwd,
|
||||
tenantEmail,
|
||||
billFwdStrategy,
|
||||
rentDueNotification,
|
||||
rentDueDay,
|
||||
addToSubsequentMonths,
|
||||
updateScope,
|
||||
} = validatedFields.data;
|
||||
@@ -155,6 +163,8 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
|
||||
autoBillFwd: autoBillFwd || false,
|
||||
tenantEmail: tenantEmail || null,
|
||||
billFwdStrategy: billFwdStrategy || "when-payed",
|
||||
rentDueNotification: rentDueNotification || false,
|
||||
rentDueDay: rentDueDay || null,
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -182,6 +192,8 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
|
||||
autoBillFwd: autoBillFwd || false,
|
||||
tenantEmail: tenantEmail || null,
|
||||
billFwdStrategy: billFwdStrategy || "when-payed",
|
||||
rentDueNotification: rentDueNotification || false,
|
||||
rentDueDay: rentDueDay || null,
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -202,6 +214,8 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
|
||||
autoBillFwd: autoBillFwd || false,
|
||||
tenantEmail: tenantEmail || null,
|
||||
billFwdStrategy: billFwdStrategy || "when-payed",
|
||||
rentDueNotification: rentDueNotification || false,
|
||||
rentDueDay: rentDueDay || null,
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -220,6 +234,8 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
|
||||
autoBillFwd: autoBillFwd || false,
|
||||
tenantEmail: tenantEmail || null,
|
||||
billFwdStrategy: billFwdStrategy || "when-payed",
|
||||
rentDueNotification: rentDueNotification || false,
|
||||
rentDueDay: rentDueDay || null,
|
||||
yearMonth: yearMonth,
|
||||
bills: [],
|
||||
});
|
||||
@@ -290,6 +306,8 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
|
||||
autoBillFwd: autoBillFwd || false,
|
||||
tenantEmail: tenantEmail || null,
|
||||
billFwdStrategy: billFwdStrategy || "when-payed",
|
||||
rentDueNotification: rentDueNotification || false,
|
||||
rentDueDay: rentDueDay || null,
|
||||
yearMonth: { year: monthData.year, month: monthData.month },
|
||||
bills: [],
|
||||
});
|
||||
|
||||
@@ -55,6 +55,10 @@ export interface BillingLocation {
|
||||
tenantEmail?: string | null;
|
||||
/** (optional) bill forwarding strategy */
|
||||
billFwdStrategy?: "when-payed" | "when-attached" | null;
|
||||
/** (optional) whether to automatically send rent notification */
|
||||
rentDueNotification?: boolean | null;
|
||||
/** (optional) day of month when rent is due (1-31) */
|
||||
rentDueDay?: number | null;
|
||||
};
|
||||
|
||||
export enum BilledTo {
|
||||
|
||||
@@ -38,6 +38,11 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
||||
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({
|
||||
tenantFirstName: location?.tenantFirstName ?? "",
|
||||
@@ -168,38 +173,68 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
||||
</div>
|
||||
|
||||
{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">
|
||||
<option value="when-payed">{t("utility-bill-forwarding-when-payed")}</option>
|
||||
<option value="when-attached">{t("utility-bill-forwarding-when-attached")}</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
<fieldset className="fieldset mt-2 p-2">
|
||||
<legend className="fieldset-legend">{t("tenant-email-label")}</legend>
|
||||
<input
|
||||
id="tenantEmail"
|
||||
name="tenantEmail"
|
||||
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)}
|
||||
/>
|
||||
<div id="tenantEmail-error" aria-live="polite" aria-atomic="true">
|
||||
{state.errors?.tenantEmail &&
|
||||
state.errors.tenantEmail.map((error: string) => (
|
||||
<p className="mt-2 text-sm text-red-500" key={error}>
|
||||
{error}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</fieldset>
|
||||
</>
|
||||
<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">
|
||||
<option value="when-payed">{t("utility-bill-forwarding-when-payed")}</option>
|
||||
<option value="when-attached">{t("utility-bill-forwarding-when-attached")}</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
)}
|
||||
</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">{t("auto-rent-notification-legend")}</legend>
|
||||
<InfoBox className="p-1 mb-1">{t("auto-rent-notification-info")}</InfoBox>
|
||||
|
||||
<div className="form-control">
|
||||
<label className="label cursor-pointer justify-start gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="rentDueNotification"
|
||||
className="toggle toggle-primary"
|
||||
checked={rentDueNotification}
|
||||
onChange={(e) => setrentDueNotification(e.target.checked)}
|
||||
/>
|
||||
<span className="label-text">{t("auto-rent-notification-toggle-label")}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{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">
|
||||
{Array.from({ length: 28 }, (_, i) => i + 1).map(day => (
|
||||
<option key={day} value={day}>{day}</option>
|
||||
))}
|
||||
</select>
|
||||
</fieldset>
|
||||
)}
|
||||
</fieldset>
|
||||
|
||||
{(autoBillFwd || 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">{t("tenant-email-legend")}</legend>
|
||||
<input
|
||||
id="tenantEmail"
|
||||
name="tenantEmail"
|
||||
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)}
|
||||
/>
|
||||
<div id="tenantEmail-error" aria-live="polite" aria-atomic="true">
|
||||
{state.errors?.tenantEmail &&
|
||||
state.errors.tenantEmail.map((error: string) => (
|
||||
<p className="mt-2 text-sm text-red-500" key={error}>
|
||||
{error}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</fieldset>
|
||||
)}
|
||||
|
||||
{/* Show different options for add vs edit operations */}
|
||||
{!location ? (
|
||||
<div className="form-control">
|
||||
|
||||
Reference in New Issue
Block a user