knee-cola/evidencija-rezija
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add town and currency fields to user settings

Browse Source 
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:
Knee Cola
2025-11-22 15:14:19 +01:00
parent 795d9c690b
commit 3cf880a661
5 changed files with 126 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/lib/actions/userSettingsActions.ts
View File

@@ -17,7 +17,9 @@ export type State = {
firstName?: string[];
lastName?: string[];
street?: string[];
town?: string[];
iban?: string[];
currency?: string[];
show2dCodeInMonthlyStatement?: string[];
};
message?: string | null;
@@ -31,6 +33,7 @@ const FormSchema = (t: IntlTemplateFn) => z.object({
firstName: z.string().optional(),
lastName: z.string().optional(),
street: z.string().optional(),
town: z.string().optional(),
iban: z.string()
.optional()
.refine(
@@ -42,6 +45,7 @@ const FormSchema = (t: IntlTemplateFn) => z.object({
},
{ message: t("iban-invalid") }
),
currency: z.string().optional(),
show2dCodeInMonthlyStatement: z.boolean().optional().nullable(),
})
.refine((data) => {
@@ -71,6 +75,15 @@ const FormSchema = (t: IntlTemplateFn) => z.object({
message: t("street-required"),
path: ["street"],
})
.refine((data) => {
if (data.show2dCodeInMonthlyStatement) {
return !!data.town && data.town.trim().length > 0;
}
return true;
}, {
message: t("town-required"),
path: ["town"],
})
.refine((data) => {
if (data.show2dCodeInMonthlyStatement) {
if (!data.iban || data.iban.trim().length === 0) {
@@ -84,6 +97,15 @@ const FormSchema = (t: IntlTemplateFn) => z.object({
}, {
message: t("iban-required"),
path: ["iban"],
})
.refine((data) => {
if (data.show2dCodeInMonthlyStatement) {
return !!data.currency && data.currency.trim().length > 0;
}
return true;
}, {
message: t("currency-required"),
path: ["currency"],
});
/**
@@ -113,7 +135,9 @@ export const updateUserSettings = withUser(async (user: AuthenticatedUser, prevS
firstName: formData.get('firstName') || undefined,
lastName: formData.get('lastName') || undefined,
street: formData.get('street') || undefined,
town: formData.get('town') || undefined,
iban: formData.get('iban') || undefined,
currency: formData.get('currency') || undefined,
show2dCodeInMonthlyStatement: formData.get('generateTenantCode') === 'on',
});
@@ -126,7 +150,7 @@ export const updateUserSettings = withUser(async (user: AuthenticatedUser, prevS
};
}
const { firstName, lastName, street, iban, show2dCodeInMonthlyStatement } = validatedFields.data;
const { firstName, lastName, street, town, iban, currency, show2dCodeInMonthlyStatement } = validatedFields.data;
// Normalize IBAN: remove spaces and convert to uppercase
const normalizedIban = iban ? iban.replace(/\s/g, '').toUpperCase() : null;
@@ -140,7 +164,9 @@ export const updateUserSettings = withUser(async (user: AuthenticatedUser, prevS
firstName: firstName || null,
lastName: lastName || null,
street: street || null,
town: town || null,
iban: normalizedIban,
currency: currency || null,
show2dCodeInMonthlyStatement: show2dCodeInMonthlyStatement ?? false,
};

4
app/lib/db-types.ts
View File

@@ -24,8 +24,12 @@ export interface UserSettings {
lastName?: string | null;
/** street */
street?: string | null;
/** town */
town?: string | null;
/** IBAN */
iban?: string | null;
/** currency (ISO 4217) */
currency?: string | null;
/** whether to show 2D code in monthly statement */
show2dCodeInMonthlyStatement?: boolean | null;
};

86
app/ui/UserSettingsForm.tsx
View File

@@ -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>
</>
)}