Add town and currency fields to user settings
Adds two new fields to user settings form: - Town field: Text input for city/town (required when 2D code enabled) - Currency field: Select dropdown with ISO 4217 currency codes (EUR default) Updates: - Database schema: Added town and currency fields to UserSettings - Validation: Both fields required when 2D code is enabled - Form UI: Added input fields with proper validation and error handling - Translations: Added Croatian and English labels and error messages - Currency options: 36 ISO 4217 codes with EUR at top as default 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -30,7 +30,9 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
|
||||
firstName: userSettings?.firstName ?? "",
|
||||
lastName: userSettings?.lastName ?? "",
|
||||
street: userSettings?.street ?? "",
|
||||
town: userSettings?.town ?? "",
|
||||
iban: formatIban(userSettings?.iban) ?? "",
|
||||
currency: userSettings?.currency ?? "EUR",
|
||||
});
|
||||
|
||||
const handleInputChange = (field: keyof typeof formValues, value: string) => {
|
||||
@@ -39,7 +41,7 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
|
||||
|
||||
// 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.street || !cleanedIban;
|
||||
const hasMissingData = !formValues.firstName || !formValues.lastName || !formValues.street || !formValues.town || !cleanedIban || !formValues.currency;
|
||||
|
||||
// Track whether to generate 2D code for tenant (use persisted value from database)
|
||||
const [show2dCodeInMonthlyStatement, setShow2dCodeInMonthlyStatement] = useState(
|
||||
@@ -140,6 +142,30 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-control w-full">
|
||||
<label className="label">
|
||||
<span className="label-text">{t("town-label")}</span>
|
||||
</label>
|
||||
<input
|
||||
id="town"
|
||||
name="town"
|
||||
type="text"
|
||||
placeholder={t("town-placeholder")}
|
||||
className="input input-bordered w-full placeholder:text-gray-600"
|
||||
defaultValue={userSettings?.town ?? ""}
|
||||
onChange={(e) => handleInputChange("town", e.target.value)}
|
||||
disabled={pending}
|
||||
/>
|
||||
<div id="town-error" aria-live="polite" aria-atomic="true">
|
||||
{errors?.town &&
|
||||
errors.town.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>
|
||||
@@ -163,6 +189,64 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-control w-full">
|
||||
<label className="label">
|
||||
<span className="label-text">{t("currency-label")}</span>
|
||||
</label>
|
||||
<select
|
||||
id="currency"
|
||||
name="currency"
|
||||
className="select select-bordered w-full"
|
||||
defaultValue={userSettings?.currency ?? "EUR"}
|
||||
onChange={(e) => handleInputChange("currency", e.target.value)}
|
||||
disabled={pending}
|
||||
>
|
||||
<option value="EUR">EUR - Euro</option>
|
||||
<option value="USD">USD - US Dollar</option>
|
||||
<option value="GBP">GBP - British Pound</option>
|
||||
<option value="CHF">CHF - Swiss Franc</option>
|
||||
<option value="JPY">JPY - Japanese Yen</option>
|
||||
<option value="CAD">CAD - Canadian Dollar</option>
|
||||
<option value="AUD">AUD - Australian Dollar</option>
|
||||
<option value="NZD">NZD - New Zealand Dollar</option>
|
||||
<option value="CNY">CNY - Chinese Yuan</option>
|
||||
<option value="HKD">HKD - Hong Kong Dollar</option>
|
||||
<option value="SGD">SGD - Singapore Dollar</option>
|
||||
<option value="SEK">SEK - Swedish Krona</option>
|
||||
<option value="NOK">NOK - Norwegian Krone</option>
|
||||
<option value="DKK">DKK - Danish Krone</option>
|
||||
<option value="PLN">PLN - Polish Zloty</option>
|
||||
<option value="CZK">CZK - Czech Koruna</option>
|
||||
<option value="HUF">HUF - Hungarian Forint</option>
|
||||
<option value="RON">RON - Romanian Leu</option>
|
||||
<option value="BGN">BGN - Bulgarian Lev</option>
|
||||
<option value="RSD">RSD - Serbian Dinar</option>
|
||||
<option value="BAM">BAM - Bosnia-Herzegovina Mark</option>
|
||||
<option value="MKD">MKD - Macedonian Denar</option>
|
||||
<option value="ALL">ALL - Albanian Lek</option>
|
||||
<option value="TRY">TRY - Turkish Lira</option>
|
||||
<option value="RUB">RUB - Russian Ruble</option>
|
||||
<option value="UAH">UAH - Ukrainian Hryvnia</option>
|
||||
<option value="INR">INR - Indian Rupee</option>
|
||||
<option value="BRL">BRL - Brazilian Real</option>
|
||||
<option value="MXN">MXN - Mexican Peso</option>
|
||||
<option value="ZAR">ZAR - South African Rand</option>
|
||||
<option value="KRW">KRW - South Korean Won</option>
|
||||
<option value="THB">THB - Thai Baht</option>
|
||||
<option value="MYR">MYR - Malaysian Ringgit</option>
|
||||
<option value="IDR">IDR - Indonesian Rupiah</option>
|
||||
<option value="PHP">PHP - Philippine Peso</option>
|
||||
</select>
|
||||
<div id="currency-error" aria-live="polite" aria-atomic="true">
|
||||
{errors?.currency &&
|
||||
errors.currency.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>
|
||||
</>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user