231 lines
10 KiB
TypeScript
231 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { FC, useState } from "react";
|
|
import { UserProfile } from "../lib/db-types";
|
|
import { updateUserProfile } from "../lib/actions/userProfileActions";
|
|
import { useFormState, useFormStatus } from "react-dom";
|
|
import { useLocale, useTranslations } from "next-intl";
|
|
import Link from "next/link";
|
|
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
|
|
import { formatIban } from "../lib/formatStrings";
|
|
import { InfoBox } from "./InfoBox";
|
|
|
|
export type AccountFormProps = {
|
|
profile: UserProfile | null;
|
|
}
|
|
|
|
type FormFieldsProps = {
|
|
profile: UserProfile | null;
|
|
errors: any;
|
|
message: string | null;
|
|
}
|
|
|
|
const FormFields: FC<FormFieldsProps> = ({ profile, errors, message }) => {
|
|
const { pending } = useFormStatus();
|
|
const t = useTranslations("account-form");
|
|
const locale = useLocale();
|
|
|
|
// Track current form values for real-time validation
|
|
const [formValues, setFormValues] = useState({
|
|
firstName: profile?.firstName ?? "",
|
|
lastName: profile?.lastName ?? "",
|
|
address: profile?.address ?? "",
|
|
iban: formatIban(profile?.iban) ?? "",
|
|
});
|
|
|
|
const handleInputChange = (field: keyof typeof formValues, value: string) => {
|
|
setFormValues(prev => ({ ...prev, [field]: value }));
|
|
};
|
|
|
|
// Check if any required field is missing (clean IBAN of spaces for validation)
|
|
const cleanedIban = formValues.iban.replace(/\s/g, '');
|
|
const hasMissingData = !formValues.firstName || !formValues.lastName || !formValues.address || !cleanedIban;
|
|
|
|
// Track whether to generate 2D code for tenant (use persisted value from database)
|
|
const [show2dCodeInMonthlyStatement, setShow2dCodeInMonthlyStatement] = useState(
|
|
profile?.show2dCodeInMonthlyStatement ?? false
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<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-2d-code-legend")}</legend>
|
|
|
|
<InfoBox className="p-1 mb-1">{t("info-box-message")}</InfoBox>
|
|
|
|
<fieldset className="fieldset">
|
|
<label className="label cursor-pointer justify-start gap-3">
|
|
<input
|
|
type="checkbox"
|
|
name="generateTenantCode"
|
|
className="toggle toggle-primary"
|
|
checked={show2dCodeInMonthlyStatement}
|
|
onChange={(e) => setShow2dCodeInMonthlyStatement(e.target.checked)}
|
|
/>
|
|
<legend className="fieldset-legend">{t("tenant-2d-code-toggle-label")}</legend>
|
|
</label>
|
|
</fieldset>
|
|
|
|
{show2dCodeInMonthlyStatement && (
|
|
<>
|
|
<div className="form-control w-full">
|
|
<label className="label">
|
|
<span className="label-text">{t("first-name-label")}</span>
|
|
</label>
|
|
<input
|
|
id="firstName"
|
|
name="firstName"
|
|
type="text"
|
|
placeholder={t("first-name-placeholder")}
|
|
className="input input-bordered w-full placeholder:text-gray-600"
|
|
defaultValue={profile?.firstName ?? ""}
|
|
onChange={(e) => handleInputChange("firstName", e.target.value)}
|
|
disabled={pending}
|
|
/>
|
|
<div id="firstName-error" aria-live="polite" aria-atomic="true">
|
|
{errors?.firstName &&
|
|
errors.firstName.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("last-name-label")}</span>
|
|
</label>
|
|
<input
|
|
id="lastName"
|
|
name="lastName"
|
|
type="text"
|
|
placeholder={t("last-name-placeholder")}
|
|
className="input input-bordered w-full placeholder:text-gray-600"
|
|
defaultValue={profile?.lastName ?? ""}
|
|
onChange={(e) => handleInputChange("lastName", e.target.value)}
|
|
disabled={pending}
|
|
/>
|
|
<div id="lastName-error" aria-live="polite" aria-atomic="true">
|
|
{errors?.lastName &&
|
|
errors.lastName.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("address-label")}</span>
|
|
</label>
|
|
<textarea
|
|
id="address"
|
|
name="address"
|
|
className="textarea textarea-bordered w-full placeholder:text-gray-600"
|
|
placeholder={t("address-placeholder")}
|
|
defaultValue={profile?.address ?? ""}
|
|
onChange={(e) => handleInputChange("address", e.target.value)}
|
|
disabled={pending}
|
|
></textarea>
|
|
<div id="address-error" aria-live="polite" aria-atomic="true">
|
|
{errors?.address &&
|
|
errors.address.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-label")}</span>
|
|
</label>
|
|
<input
|
|
id="iban"
|
|
name="iban"
|
|
type="text"
|
|
placeholder={t("iban-placeholder")}
|
|
className="input input-bordered w-full placeholder:text-gray-600"
|
|
defaultValue={formatIban(profile?.iban)}
|
|
onChange={(e) => handleInputChange("iban", e.target.value)}
|
|
disabled={pending}
|
|
/>
|
|
<div id="iban-error" aria-live="polite" aria-atomic="true">
|
|
{errors?.iban &&
|
|
errors.iban.map((error: string) => (
|
|
<p className="mt-2 text-sm text-red-500" key={error}>
|
|
{error}
|
|
</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<InfoBox className="p-1 mt-1">{t("additional-notes")}</InfoBox>
|
|
</>
|
|
)}
|
|
</fieldset>
|
|
|
|
<div id="general-error" aria-live="polite" aria-atomic="true">
|
|
{message && (
|
|
<p className="mt-2 text-sm text-red-500">
|
|
{message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="pt-4">
|
|
<button className="btn btn-primary w-[5.5em]" disabled={pending}>
|
|
{pending ? (
|
|
<span className="loading loading-spinner loading-sm"></span>
|
|
) : (
|
|
t("save-button")
|
|
)}
|
|
</button>
|
|
<Link className={`btn btn-neutral w-[5.5em] ml-3 ${pending ? "btn-disabled" : ""}`} href={`/${locale}`}>
|
|
{t("cancel-button")}
|
|
</Link>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const AccountForm: FC<AccountFormProps> = ({ profile }) => {
|
|
const initialState = { message: null, errors: {} };
|
|
const [state, dispatch] = useFormState(updateUserProfile, initialState);
|
|
const t = useTranslations("account-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">
|
|
<h2 className="card-title"><AccountCircleIcon className="w-6 h-6" /> {t("title")}</h2>
|
|
<form action={dispatch}>
|
|
<FormFields
|
|
profile={profile}
|
|
errors={state.errors}
|
|
message={state.message ?? null}
|
|
/>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const AccountFormSkeleton: FC = () => {
|
|
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">
|
|
<div className="h-8 w-32 skeleton mb-4"></div>
|
|
<div className="input w-full skeleton"></div>
|
|
<div className="input w-full skeleton mt-4"></div>
|
|
<div className="textarea w-full h-24 skeleton mt-4"></div>
|
|
<div className="input w-full skeleton mt-4"></div>
|
|
<div className="pt-4">
|
|
<div className="btn skeleton w-24"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|