Add info box to account form explaining barcode usage

Added informational alert at the top of the account form to explain
that profile data (name, address, IBAN) will be used to generate 2D
barcodes for tenant bill payments. The alert uses a horizontal layout
on all screen sizes for consistent UX.

🤖 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-17 20:06:13 +01:00
parent 3801638d0f
commit 86fa6a67fe
3 changed files with 8 additions and 0 deletions

View File

@@ -25,6 +25,12 @@ const FormFields: FC<FormFieldsProps> = ({ profile, errors, message }) => {
return ( return (
<> <>
<div className="alert max-w-md flex flex-row items-start">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-current shrink-0 w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span className="text-left">{t("info-box-message")}</span>
</div>
<div className="form-control w-full"> <div className="form-control w-full">
<label className="label"> <label className="label">
<span className="label-text">{t("first-name-label")}</span> <span className="label-text">{t("first-name-label")}</span>

View File

@@ -138,6 +138,7 @@
}, },
"account-form": { "account-form": {
"title": "Profile Information", "title": "Profile Information",
"info-box-message": "This information will be used to generate a 2D barcode displayed in the bill view, allowing tenants to scan it and refund the money you have spent on paying utility bills in their name.",
"first-name-label": "First Name", "first-name-label": "First Name",
"first-name-placeholder": "Enter your first name", "first-name-placeholder": "Enter your first name",
"last-name-label": "Last Name", "last-name-label": "Last Name",

View File

@@ -137,6 +137,7 @@
}, },
"account-form": { "account-form": {
"title": "Podaci o profilu", "title": "Podaci o profilu",
"info-box-message": "Ovi podaci će se koristiti za generiranje 2D barkoda koji će biti prikazan u pregledu računa, omogućujući podstanarima da ga skeniraju i vrate novac koji ste potrošili na plaćanje režija u njihovo ime.",
"first-name-label": "Ime", "first-name-label": "Ime",
"first-name-placeholder": "Unesite svoje ime", "first-name-placeholder": "Unesite svoje ime",
"last-name-label": "Prezime", "last-name-label": "Prezime",