From 795d9c690beac21f6c9287e2df6ac67a8cba0c56 Mon Sep 17 00:00:00 2001 From: Knee Cola Date: Sat, 22 Nov 2025 15:00:12 +0100 Subject: [PATCH] Rename address field to street and change to text input MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Changes the user settings address field to street with the following updates: - Renames database field from 'address' to 'street' in UserSettings type - Changes form input from textarea to single-line text input - Updates validation logic and error messages - Updates translations in both Croatian and English - Removes deprecated AppSettingsForm component 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/[locale]/account/page.tsx | 2 +- app/lib/actions/userSettingsActions.ts | 16 +- app/lib/db-types.ts | 4 +- app/ui/AppSettingsForm.tsx | 230 ------------------------- app/ui/UserSettingsForm.tsx | 29 ++-- messages/en.json | 6 +- messages/hr.json | 6 +- 7 files changed, 32 insertions(+), 261 deletions(-) delete mode 100644 app/ui/AppSettingsForm.tsx diff --git a/app/[locale]/account/page.tsx b/app/[locale]/account/page.tsx index caec00a..4c0003d 100644 --- a/app/[locale]/account/page.tsx +++ b/app/[locale]/account/page.tsx @@ -1,6 +1,6 @@ import { FC, Suspense } from 'react'; import { Main } from '@/app/ui/Main'; -import { UserSettingsForm as UserSettingsForm, UserSettingsFormSkeleton } from '@/app/ui/AppSettingsForm'; +import { UserSettingsForm as UserSettingsForm, UserSettingsFormSkeleton } from '@/app/ui/UserSettingsForm'; import { getUserSettings } from '@/app/lib/actions/userSettingsActions'; const AccountPage: FC = async () => { diff --git a/app/lib/actions/userSettingsActions.ts b/app/lib/actions/userSettingsActions.ts index ebc5cbb..e4f1305 100644 --- a/app/lib/actions/userSettingsActions.ts +++ b/app/lib/actions/userSettingsActions.ts @@ -16,7 +16,7 @@ export type State = { errors?: { firstName?: string[]; lastName?: string[]; - address?: string[]; + street?: string[]; iban?: string[]; show2dCodeInMonthlyStatement?: string[]; }; @@ -30,7 +30,7 @@ export type State = { const FormSchema = (t: IntlTemplateFn) => z.object({ firstName: z.string().optional(), lastName: z.string().optional(), - address: z.string().optional(), + street: z.string().optional(), iban: z.string() .optional() .refine( @@ -64,12 +64,12 @@ const FormSchema = (t: IntlTemplateFn) => z.object({ }) .refine((data) => { if (data.show2dCodeInMonthlyStatement) { - return !!data.address && data.address.trim().length > 0; + return !!data.street && data.street.trim().length > 0; } return true; }, { - message: t("address-required"), - path: ["address"], + message: t("street-required"), + path: ["street"], }) .refine((data) => { if (data.show2dCodeInMonthlyStatement) { @@ -112,7 +112,7 @@ export const updateUserSettings = withUser(async (user: AuthenticatedUser, prevS const validatedFields = FormSchema(t).safeParse({ firstName: formData.get('firstName') || undefined, lastName: formData.get('lastName') || undefined, - address: formData.get('address') || undefined, + street: formData.get('street') || undefined, iban: formData.get('iban') || undefined, show2dCodeInMonthlyStatement: formData.get('generateTenantCode') === 'on', }); @@ -126,7 +126,7 @@ export const updateUserSettings = withUser(async (user: AuthenticatedUser, prevS }; } - const { firstName, lastName, address, iban, show2dCodeInMonthlyStatement } = validatedFields.data; + const { firstName, lastName, street, iban, show2dCodeInMonthlyStatement } = validatedFields.data; // Normalize IBAN: remove spaces and convert to uppercase const normalizedIban = iban ? iban.replace(/\s/g, '').toUpperCase() : null; @@ -139,7 +139,7 @@ export const updateUserSettings = withUser(async (user: AuthenticatedUser, prevS userId, firstName: firstName || null, lastName: lastName || null, - address: address || null, + street: street || null, iban: normalizedIban, show2dCodeInMonthlyStatement: show2dCodeInMonthlyStatement ?? false, }; diff --git a/app/lib/db-types.ts b/app/lib/db-types.ts index fda8898..7cc3344 100644 --- a/app/lib/db-types.ts +++ b/app/lib/db-types.ts @@ -22,8 +22,8 @@ export interface UserSettings { firstName?: string | null; /** last name */ lastName?: string | null; - /** address */ - address?: string | null; + /** street */ + street?: string | null; /** IBAN */ iban?: string | null; /** whether to show 2D code in monthly statement */ diff --git a/app/ui/AppSettingsForm.tsx b/app/ui/AppSettingsForm.tsx deleted file mode 100644 index 0873d5f..0000000 --- a/app/ui/AppSettingsForm.tsx +++ /dev/null @@ -1,230 +0,0 @@ -"use client"; - -import { FC, useState } from "react"; -import { UserSettings } from "../lib/db-types"; -import { updateUserSettings } from "../lib/actions/userSettingsActions"; -import { useFormState, useFormStatus } from "react-dom"; -import { useLocale, useTranslations } from "next-intl"; -import Link from "next/link"; -import SettingsIcon from "@mui/icons-material/Settings"; -import { formatIban } from "../lib/formatStrings"; -import { InfoBox } from "./InfoBox"; - -export type UserSettingsFormProps = { - userSettings: UserSettings | null; -} - -type FormFieldsProps = { - userSettings: UserSettings | null; - errors: any; - message: string | null; -} - -const FormFields: FC = ({ userSettings, errors, message }) => { - const { pending } = useFormStatus(); - const t = useTranslations("user-settings-form"); - const locale = useLocale(); - - // Track current form values for real-time validation - const [formValues, setFormValues] = useState({ - firstName: userSettings?.firstName ?? "", - lastName: userSettings?.lastName ?? "", - address: userSettings?.address ?? "", - iban: formatIban(userSettings?.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( - userSettings?.show2dCodeInMonthlyStatement ?? false - ); - - return ( - <> -
- {t("tenant-2d-code-legend")} - - {t("info-box-message")} - -
- -
- - {show2dCodeInMonthlyStatement && ( - <> -
- - handleInputChange("firstName", e.target.value)} - disabled={pending} - /> -
- {errors?.firstName && - errors.firstName.map((error: string) => ( -

- {error} -

- ))} -
-
- -
- - handleInputChange("lastName", e.target.value)} - disabled={pending} - /> -
- {errors?.lastName && - errors.lastName.map((error: string) => ( -

- {error} -

- ))} -
-
- -
- - -
- {errors?.address && - errors.address.map((error: string) => ( -

- {error} -

- ))} -
-
- -
- - handleInputChange("iban", e.target.value)} - disabled={pending} - /> -
- {errors?.iban && - errors.iban.map((error: string) => ( -

- {error} -

- ))} -
-
- {t("additional-notes")} - - )} -
- -
- {message && ( -

- {message} -

- )} -
- -
- - - {t("cancel-button")} - -
- - ); -}; - -export const UserSettingsForm: FC = ({ userSettings }) => { - const initialState = { message: null, errors: {} }; - const [state, dispatch] = useFormState(updateUserSettings, initialState); - const t = useTranslations("user-settings-form"); - - return ( -
-
-

{t("title")}

-
- - -
-
- ); -}; - -export const UserSettingsFormSkeleton: FC = () => { - return ( -
-
-
-
-
-
-
-
-
-
-
-
- ); -}; diff --git a/app/ui/UserSettingsForm.tsx b/app/ui/UserSettingsForm.tsx index 0873d5f..9087ed1 100644 --- a/app/ui/UserSettingsForm.tsx +++ b/app/ui/UserSettingsForm.tsx @@ -29,7 +29,7 @@ const FormFields: FC = ({ userSettings, errors, message }) => { const [formValues, setFormValues] = useState({ firstName: userSettings?.firstName ?? "", lastName: userSettings?.lastName ?? "", - address: userSettings?.address ?? "", + street: userSettings?.street ?? "", iban: formatIban(userSettings?.iban) ?? "", }); @@ -39,7 +39,7 @@ const FormFields: FC = ({ 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.address || !cleanedIban; + const hasMissingData = !formValues.firstName || !formValues.lastName || !formValues.street || !cleanedIban; // Track whether to generate 2D code for tenant (use persisted value from database) const [show2dCodeInMonthlyStatement, setShow2dCodeInMonthlyStatement] = useState( @@ -118,20 +118,21 @@ const FormFields: FC = ({ userSettings, errors, message }) => {
- -
- {errors?.address && - errors.address.map((error: string) => ( + /> +
+ {errors?.street && + errors.street.map((error: string) => (

{error}

diff --git a/messages/en.json b/messages/en.json index ad8c3d9..d080540 100644 --- a/messages/en.json +++ b/messages/en.json @@ -190,8 +190,8 @@ "first-name-placeholder": "Enter your first name", "last-name-label": "Last Name", "last-name-placeholder": "Enter your last name", - "address-label": "Address", - "address-placeholder": "Enter your address", + "street-label": "Street", + "street-placeholder": "Enter your street", "iban-label": "IBAN", "iban-placeholder": "Enter your IBAN", "save-button": "Save", @@ -199,7 +199,7 @@ "validation": { "first-name-required": "First name is mandatory", "last-name-required": "Last name is mandatory", - "address-required": "Address is mandatory", + "street-required": "Street is mandatory", "iban-required": "Valid IBAN is mandatory", "iban-invalid": "Invalid IBAN format. Please enter a valid IBAN", "validation-failed": "Validation failed. Please check the form and try again." diff --git a/messages/hr.json b/messages/hr.json index fdfc9ae..4942887 100644 --- a/messages/hr.json +++ b/messages/hr.json @@ -189,8 +189,8 @@ "first-name-placeholder": "Unesite svoje ime", "last-name-label": "Prezime", "last-name-placeholder": "Unesite svoje prezime", - "address-label": "Adresa", - "address-placeholder": "Unesite svoju adresu", + "street-label": "Ulica", + "street-placeholder": "Unesite ulicu", "iban-label": "IBAN", "iban-placeholder": "Unesite svoj IBAN", "save-button": "Spremi", @@ -198,7 +198,7 @@ "validation": { "first-name-required": "Ime je obavezno", "last-name-required": "Prezime je obavezno", - "address-required": "Adresa je obavezna", + "street-required": "Ulica je obavezna", "iban-required": "Ispravan IBAN je obavezan", "iban-invalid": "Neispravan IBAN format. Molimo unesite ispravan IBAN.", "validation-failed": "Validacija nije uspjela. Molimo provjerite formu i pokušajte ponovno."