b44d5afca6
Changed rent amount handling to use whole currency units throughout the application instead of storing in cents. This simplifies data entry and aligns with Zod validation requiring integer values. Changes: - Set rent input step to "1" (whole numbers only) - Remove cents-to-currency conversion (/ 100) when formatting for email 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
504 lines
30 KiB
TypeScript
504 lines
30 KiB
TypeScript
"use client";
|
|
|
|
import { TrashIcon, ExclamationTriangleIcon, ClockIcon, EnvelopeIcon, CheckCircleIcon, PencilSquareIcon, XCircleIcon } from "@heroicons/react/24/outline";
|
|
import { FC, useState } from "react";
|
|
import { BillingLocation, UserSettings, YearMonth, EmailStatus } from '@evidencija-rezija/shared-code';
|
|
import { updateOrAddLocation } from "../lib/actions/locationActions";
|
|
import { useFormState } from "react-dom";
|
|
import Link from "next/link";
|
|
import { useLocale, useTranslations } from "next-intl";
|
|
import { InfoBox } from "./InfoBox";
|
|
|
|
export type LocationEditFormProps = {
|
|
/** location which should be edited */
|
|
location: BillingLocation,
|
|
/** year adn month at a new billing location should be assigned */
|
|
yearMonth?: undefined,
|
|
/** user settings for payment configuration */
|
|
userSettings: UserSettings | null
|
|
} | {
|
|
/** location which should be edited */
|
|
location?: undefined,
|
|
/** year adn month at a new billing location should be assigned */
|
|
yearMonth: YearMonth,
|
|
/** user settings for payment configuration */
|
|
userSettings: UserSettings | null
|
|
}
|
|
|
|
export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMonth, userSettings }) => {
|
|
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 tenant field values for real-time validation
|
|
const [formValues, setFormValues] = useState({
|
|
locationName: location?.name ?? "",
|
|
tenantName: location?.tenantName ?? "",
|
|
tenantStreet: location?.tenantStreet ?? "",
|
|
tenantTown: location?.tenantTown ?? "",
|
|
tenantEmail: location?.tenantEmail ?? "",
|
|
tenantEmailStatus: location?.tenantEmailStatus ?? EmailStatus.Unverified,
|
|
tenantPaymentMethod: location?.tenantPaymentMethod ?? "none",
|
|
proofOfPaymentType: location?.proofOfPaymentType ?? "none",
|
|
billFwdEnabled: location?.billFwdEnabled ?? false,
|
|
billFwdStrategy: location?.billFwdStrategy ?? "when-payed",
|
|
rentDueNotificationEnabled: location?.rentDueNotificationEnabled ?? false,
|
|
rentAmount: location?.rentAmount ?? "",
|
|
rentDueDay: location?.rentDueDay ?? 1,
|
|
});
|
|
|
|
// tenant e-mail fetched from database
|
|
const [dbTenantEmail, setDbTenantEmail] = useState(location?.tenantEmail ?? "");
|
|
|
|
const handleInputChange = (field: keyof typeof formValues, value: string | boolean | number) => {
|
|
setFormValues(prev => ({ ...prev, [field]: value }));
|
|
};
|
|
|
|
const handleResetEmailStatus = () => {
|
|
// this will simulate that the email
|
|
// is new and needs verification
|
|
setDbTenantEmail("");
|
|
// reset the email status to unverified
|
|
setFormValues(prev => ({ ...prev, tenantEmailStatus: EmailStatus.Unverified }));
|
|
};
|
|
|
|
let { year, month } = location ? location.yearMonth : yearMonth;
|
|
|
|
return (
|
|
<div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
|
|
<div className="card-body">
|
|
<form action={dispatch}>
|
|
{
|
|
location &&
|
|
<Link href={`/${locale}/home/location/${location._id}/delete`} className="absolute bottom-5 right-4 tooltip" data-tip={t("delete-tooltip")}>
|
|
<TrashIcon className="h-[1em] w-[1em] text-error text-2xl" />
|
|
</Link>
|
|
}
|
|
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 pt-3 mt-4">
|
|
<legend className="fieldset-legend font-semibold uppercase text-base">{t("location-name-legend")}</legend>
|
|
<fieldset className="fieldset p-2 pt-0">
|
|
<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) => (
|
|
<p className="mt-2 text-sm text-red-500" key={error}>
|
|
{error}
|
|
</p>
|
|
))}
|
|
</div>
|
|
</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 uppercase text-base">{t("tenant-payment-instructions-legend")}</legend>
|
|
|
|
<InfoBox>{t("tenant-payment-instructions-code-info")}</InfoBox>
|
|
|
|
<fieldset className="fieldset mt-2 p-2">
|
|
<legend className="fieldset-legend">{t("tenant-payment-instructions-method--legend")}</legend>
|
|
<select
|
|
value={(!userSettings?.enableIbanPayment && !userSettings?.enableRevolutPayment) ? "none" : 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" disabled={!userSettings?.enableIbanPayment}>
|
|
{
|
|
userSettings?.enableIbanPayment ?
|
|
t("tenant-payment-instructions-method--iban") :
|
|
t("tenant-payment-instructions-method--iban-disabled")
|
|
}
|
|
</option>
|
|
<option value="revolut" disabled={!userSettings?.enableRevolutPayment}>
|
|
{
|
|
userSettings?.enableRevolutPayment ?
|
|
t("tenant-payment-instructions-method--revolut") :
|
|
t("tenant-payment-instructions-method--revolut-disabled")
|
|
}
|
|
</option>
|
|
</select>
|
|
</fieldset>
|
|
|
|
{formValues.tenantPaymentMethod === "iban" && userSettings?.enableIbanPayment ? (
|
|
<div className="animate-expand-fade-in origin-top">
|
|
<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>
|
|
</label>
|
|
<input
|
|
id="tenantName"
|
|
name="tenantName"
|
|
type="text"
|
|
maxLength={30}
|
|
placeholder={t("iban-payment--tenant-name-placeholder")}
|
|
className="input input-bordered w-full placeholder:text-gray-600"
|
|
defaultValue={formValues.tenantName}
|
|
onChange={(e) => handleInputChange("tenantName", e.target.value)}
|
|
/>
|
|
<div id="tenantName-error" aria-live="polite" aria-atomic="true">
|
|
{state.errors?.tenantName &&
|
|
state.errors.tenantName.map((error: string) => (
|
|
<p className="mt-2 text-sm text-red-500" key={error}>
|
|
{error}
|
|
</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="form-control w-full">
|
|
<label className="label">
|
|
<span className="label-text">{t("iban-payment--tenant-street-label")}</span>
|
|
</label>
|
|
<input
|
|
id="tenantStreet"
|
|
name="tenantStreet"
|
|
type="text"
|
|
maxLength={27}
|
|
placeholder={t("iban-payment--tenant-street-placeholder")}
|
|
className="input input-bordered w-full placeholder:text-gray-600"
|
|
defaultValue={formValues.tenantStreet}
|
|
onChange={(e) => handleInputChange("tenantStreet", e.target.value)}
|
|
/>
|
|
<div id="tenantStreet-error" aria-live="polite" aria-atomic="true">
|
|
{state.errors?.tenantStreet &&
|
|
state.errors.tenantStreet.map((error: string) => (
|
|
<p className="mt-2 text-sm text-red-500" key={error}>
|
|
{error}
|
|
</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="form-control w-full mb-4">
|
|
<label className="label">
|
|
<span className="label-text">{t("iban-payment--tenant-town-label")}</span>
|
|
</label>
|
|
<input
|
|
id="tenantTown"
|
|
name="tenantTown"
|
|
type="text"
|
|
maxLength={27}
|
|
placeholder={t("iban-payment--tenant-town-placeholder")}
|
|
className="input input-bordered w-full placeholder:text-gray-600"
|
|
defaultValue={formValues.tenantTown}
|
|
onChange={(e) => handleInputChange("tenantTown", e.target.value)}
|
|
/>
|
|
<div id="tenantTown-error" aria-live="polite" aria-atomic="true">
|
|
{state.errors?.tenantTown &&
|
|
state.errors.tenantTown.map((error: string) => (
|
|
<p className="mt-2 text-sm text-red-500" key={error}>
|
|
{error}
|
|
</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : // 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 text-base">{t("proof-of-payment-attachment-type--legend")}</legend>
|
|
|
|
<InfoBox>{t("proof-of-payment-attachment-type--info")}</InfoBox>
|
|
|
|
<fieldset className="fieldset mt-2 p-2">
|
|
<legend className="fieldset-legend">{t("proof-of-payment-attachment-type--option--label")}</legend>
|
|
<select
|
|
value={formValues.proofOfPaymentType}
|
|
className="select input-bordered w-full"
|
|
name="proofOfPaymentType"
|
|
onChange={(e) => handleInputChange("proofOfPaymentType", e.target.value)}
|
|
>
|
|
<option value="none">{t("proof-of-payment-attachment-type--option--none")}</option>
|
|
<option value="combined">{t("proof-of-payment-attachment-type--option--combined")}</option>
|
|
<option value="per-bill">{t("proof-of-payment-attachment-type--option--per-bill")}</option>
|
|
</select>
|
|
{
|
|
formValues.tenantPaymentMethod === "none" && formValues.proofOfPaymentType === "combined" ?
|
|
<p className="mt-4 ml-4 text-sm w-full sm:w-[30rem] text-yellow-600">
|
|
{
|
|
t.rich("proof-of-payment-attachment-type--option--combined--hint",
|
|
{
|
|
strong: (children: React.ReactNode) => <strong>{children}</strong>
|
|
}
|
|
)
|
|
}
|
|
</p> :
|
|
<p className="mt-4 ml-4 text-sm w-full sm:w-[30rem] italic text-gray-500">
|
|
{
|
|
formValues.proofOfPaymentType === "combined" ?
|
|
t("proof-of-payment-attachment-type--option--combined--tooltip") :
|
|
t("proof-of-payment-attachment-type--option--per-bill--tooltip")
|
|
}
|
|
</p>
|
|
}
|
|
</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 uppercase text-base">{t("auto-utility-bill-forwarding-legend")}</legend>
|
|
<InfoBox>{t("auto-utility-bill-forwarding-info")}</InfoBox>
|
|
|
|
<fieldset className="fieldset">
|
|
<label className="label cursor-pointer justify-start gap-3">
|
|
<input
|
|
type="checkbox"
|
|
name="billFwdEnabled"
|
|
className="toggle toggle-primary"
|
|
checked={formValues.billFwdEnabled}
|
|
onChange={(e) => handleInputChange("billFwdEnabled", e.target.checked)}
|
|
/>
|
|
<legend className="fieldset-legend">{t("auto-utility-bill-forwarding-toggle-label")}</legend>
|
|
</label>
|
|
</fieldset>
|
|
|
|
{formValues.billFwdEnabled && (
|
|
<fieldset className="fieldset mt-2 p-2">
|
|
<legend className="fieldset-legend">{t("utility-bill-forwarding-strategy-label")}</legend>
|
|
<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>
|
|
</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 uppercase text-base">{t("auto-rent-notification-legend")}</legend>
|
|
<InfoBox>{t("auto-rent-notification-info")}</InfoBox>
|
|
|
|
<fieldset className="fieldset">
|
|
<label className="label cursor-pointer justify-start gap-3">
|
|
<input
|
|
type="checkbox"
|
|
name="rentDueNotificationEnabled"
|
|
className="toggle toggle-primary"
|
|
checked={formValues.rentDueNotificationEnabled}
|
|
onChange={(e) => handleInputChange("rentDueNotificationEnabled", e.target.checked)}
|
|
/>
|
|
<legend className="fieldset-legend">{t("auto-rent-notification-toggle-label")}</legend>
|
|
</label>
|
|
</fieldset>
|
|
|
|
{formValues.rentDueNotificationEnabled && (
|
|
<div className="animate-expand-fade-in origin-top">
|
|
<fieldset className="fieldset mt-2 p-2">
|
|
<legend className="fieldset-legend">{t("rent-due-day-label")}</legend>
|
|
<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>
|
|
))}
|
|
</select>
|
|
</fieldset>
|
|
<fieldset className="fieldset mt-2 p-2">
|
|
<legend className="fieldset-legend">{t("rent-amount-label")}</legend>
|
|
<input
|
|
id="rentAmount"
|
|
name="rentAmount"
|
|
type="number"
|
|
min="1"
|
|
step="1"
|
|
placeholder={t("rent-amount-placeholder")}
|
|
className="input input-bordered w-full placeholder:text-gray-600 text-right"
|
|
defaultValue={formValues.rentAmount}
|
|
onChange={(e) => handleInputChange("rentAmount", parseFloat(e.target.value))}
|
|
/>
|
|
<div id="rentAmount-error" aria-live="polite" aria-atomic="true">
|
|
{state.errors?.rentAmount &&
|
|
state.errors.rentAmount.map((error: string) => (
|
|
<p className="mt-2 text-sm text-red-500" key={error}>
|
|
{error}
|
|
</p>
|
|
))}
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
)}
|
|
</fieldset>
|
|
|
|
{(formValues.billFwdEnabled || formValues.rentDueNotificationEnabled) && (
|
|
<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
|
|
id="tenantEmail"
|
|
name="tenantEmail"
|
|
type="email"
|
|
placeholder={t("tenant-email-placeholder")}
|
|
className="input input-bordered w-full placeholder:text-gray-600"
|
|
defaultValue={formValues.tenantEmail}
|
|
onChange={(e) => handleInputChange("tenantEmail", e.target.value)}
|
|
/>
|
|
<input
|
|
id="tenantEmailStatus"
|
|
name="tenantEmailStatus"
|
|
type="hidden"
|
|
maxLength={30}
|
|
defaultValue={formValues.tenantEmailStatus}
|
|
/>
|
|
{dbTenantEmail === formValues.tenantEmail ? (
|
|
<div className="flex items-center gap-2 mt-2 ml-2">
|
|
{location?.tenantEmailStatus === EmailStatus.Unverified && (
|
|
<>
|
|
<ExclamationTriangleIcon className="h-5 w-5 text-warning" />
|
|
<span className="text-sm text-warning">{t("email-status.unverified")}</span>
|
|
</>
|
|
)}
|
|
{location?.tenantEmailStatus === EmailStatus.VerificationPending && (
|
|
<>
|
|
<ClockIcon className="h-5 w-5 text-info" />
|
|
<span className="text-sm text-info">{t("email-status.verification-pending")}</span>
|
|
</>
|
|
)}
|
|
{location?.tenantEmailStatus === EmailStatus.VerificationFailed && (
|
|
<>
|
|
<XCircleIcon className="h-5 w-5 text-error" />
|
|
<span className="text-sm text-error">{t("email-status.verification-failed")}</span>
|
|
<button className="btn btn-neutral min-h-0 h-[1.5rem]" onClick={ handleResetEmailStatus }>{t("email-status.reset-button-label")}</button>
|
|
</>
|
|
)}
|
|
{location?.tenantEmailStatus === EmailStatus.Verified && (
|
|
<>
|
|
<CheckCircleIcon className="h-5 w-5 text-success" />
|
|
<span className="text-sm text-success">{t("email-status.verified")}</span>
|
|
</>
|
|
)}
|
|
{location?.tenantEmailStatus === EmailStatus.Unsubscribed && (
|
|
<>
|
|
<EnvelopeIcon className="h-5 w-5 text-error" />
|
|
<span className="text-sm text-error">{t("email-status.unsubscribed")}</span>
|
|
<button className="btn btn-neutral min-h-0 h-[1.5rem]" onClick={ handleResetEmailStatus }>{t("email-status.reset-button-label")}</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
):(
|
|
<div className="flex items-center gap-2 mt-2 ml-2">
|
|
<PencilSquareIcon className="h-5 w-5 text-primary" />
|
|
<span className="text-sm text-primary">{t("email-status.new")}</span>
|
|
</div>
|
|
)}
|
|
<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 bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
|
|
<legend className="fieldset-legend font-semibold uppercase text-base">{t("scope-legend")}</legend>
|
|
{!location ? (
|
|
<fieldset className="fieldset">
|
|
<label className="label cursor-pointer justify-start gap-3">
|
|
<input
|
|
type="checkbox"
|
|
name="addToSubsequentMonths"
|
|
className="toggle toggle-primary"
|
|
/>
|
|
<legend className="fieldset-legend">{t("add-to-subsequent-months")}</legend>
|
|
</label>
|
|
</fieldset>
|
|
|
|
) : (
|
|
<>
|
|
<InfoBox>{t("update-scope-info")}</InfoBox>
|
|
<fieldset className="fieldset mt-2 p-2">
|
|
<legend className="fieldset-legend">{t("update-scope-legend")}</legend>
|
|
<select className="select input-bordered w-full" name="updateScope">
|
|
<option value="no-scope-selected">{t("update-option-placeholder")}</option>
|
|
<option value="current">{t("update-current-month")}</option>
|
|
<option value="subsequent">{t("update-subsequent-months")}</option>
|
|
<option value="all">{t("update-all-months")}</option>
|
|
</select>
|
|
<div id="updateScope-error" aria-live="polite" aria-atomic="true">
|
|
{state.errors?.updateScope &&
|
|
state.errors.updateScope.map((error: string) => (
|
|
<p className="mt-2 text-sm text-red-500" key={error}>
|
|
{error}
|
|
</p>
|
|
))}
|
|
</div>
|
|
</fieldset>
|
|
</>
|
|
)}
|
|
</fieldset>
|
|
|
|
<div id="status-error" aria-live="polite" aria-atomic="true">
|
|
{
|
|
state.message &&
|
|
<p className="mt-2 text-sm text-red-500">
|
|
{state.message}
|
|
</p>
|
|
}
|
|
</div>
|
|
<div className="pt-4">
|
|
<button className="btn btn-primary w-[5.5em]">{t("save-button")}</button>
|
|
<Link className="btn btn-neutral w-[5.5em] ml-3" href={`/home?year=${year}&month=${month}`}>{t("cancel-button")}</Link>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const LocationEditFormSkeleton: FC = () => {
|
|
const t = useTranslations("location-edit-form");
|
|
|
|
return (
|
|
<div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
|
|
|
|
<div className="card-body">
|
|
<fieldset className="fieldset mt-2 p-2">
|
|
<legend className="fieldset-legend font-semibold uppercase">{t("location-name-legend")}</legend>
|
|
<div id="locationName" className="input w-full skeleton"></div>
|
|
</fieldset>
|
|
<div className="pt-4">
|
|
<div className="btn w-[5.5em] skeleton"></div>
|
|
<div className="btn w-[5.5em] ml-3 skeleton"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|