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

refactor: improve payment method dropdown UX with inline disabled labels

Browse Source 
- Remove disabled attribute from select - users can now always see all options
- Add conditional option labels showing "(disabled in app settings)" for unavailable methods
- Add userSettings check to IBAN form display condition
- Remove NoteBox warning (replaced by inline disabled labels in options)
- Remove unused NoteBox import
- Remove redundant InfoBox message
- Add English and Croatian translations for disabled option labels
- Clean up removed translation keys

Better UX: Users can now see why payment options are unavailable directly in the dropdown.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Nikola Derežić
2025-11-24 17:02:09 +01:00
parent 600e31e7b1
commit 830578c2e4
3 changed files with 21 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/ui/LocationEditForm.tsx
View File

@@ -8,7 +8,6 @@ import { useFormState } from "react-dom";
import Link from "next/link";
import { useLocale, useTranslations } from "next-intl";
import { InfoBox } from "./InfoBox";
import { NoteBox } from "./NoteBox";
export type LocationEditFormProps = {
/** location which should be edited */
@@ -98,20 +97,26 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
className="select input-bordered w-full"
name="tenantPaymentMethod"
onChange={(e) => handleInputChange("tenantPaymentMethod", e.target.value)}
disabled={!userSettings?.enableIbanPayment && !userSettings?.enableRevolutPayment}
>
<option value="none">{t("tenant-payment-instructions-method--none")}</option>
<option value="iban" disabled={!userSettings?.enableIbanPayment}>{t("tenant-payment-instructions-method--iban")}</option>
<option value="revolut" disabled={!userSettings?.enableRevolutPayment}>{t("tenant-payment-instructions-method--revolut")}</option>
<option value="iban" disabled={!userSettings?.enableIbanPayment}>
{
userSettings?.enableIbanPayment ?
t("tenant-payment-instructions-method--iban") :
t("tenant-payment-instructions-method--iban-disabled")
}
</option>
<option value="revolut" disabled={!userSettings?.enableRevolutPayment}>
{
userSettings?.enableRevolutPayment ?
t("tenant-payment-instructions-method--revolut") :
t("tenant-payment-instructions-method--revolut-disabled")
}
</option>
</select>
</fieldset>
{
!userSettings?.enableIbanPayment && !userSettings?.enableRevolutPayment && (
<NoteBox className="p-1 mt-2">{t("tenant-payment-instructions-method--disabled-message")}</NoteBox>
)
}
{ formValues.tenantPaymentMethod === "iban" ? (
{ formValues.tenantPaymentMethod === "iban" && userSettings?.enableIbanPayment ? (
<>
<div className="divider mt-4 mb-2 font-bold uppercase">{t("iban-payment--form-title")}</div>
<div className="form-control w-full">
@@ -185,7 +190,6 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
))}
</div>
</div>
<InfoBox className="p-1 mb-1">{t("tenant--payment-instructions-note")}</InfoBox>
</>
) : // ELSE include hidden inputs to preserve existing values
<>

5
messages/en.json
View File

@@ -149,10 +149,11 @@
"tenant-payment-instructions-method--legend": "Show payment instructions to tenant:",
"tenant-payment-instructions-method--none": "do not show payment instructions",
"tenant-payment-instructions-method--iban": "payment via IBAN",
"tenant-payment-instructions-method--iban-disabled": "payment via IBAN - disabled in app settings",
"tenant-payment-instructions-method--revolut": "payment via Revolut",
"tenant-payment-instructions-method--disabled-message": "IMPORTANT: Payment instructions are not available because neither IBAN nor Revolut payment methods are configured in your user settings. Please go to Settings and enable at least one payment method.",
"tenant-payment-instructions-method--revolut-disabled": "payment via Revolut - disabled in app settings",
"tenant--payment-instructions-note": "IMPORTANT: for this to work you will also need to go into app settings and enter your name and IBAN.",
"iban-payment--tenant-name-label": "Tenant First and Last Name",
"iban-payment--tenant-name-placeholder": "enter tenant's first and last name",

6
messages/hr.json
View File

@@ -148,10 +148,10 @@
"tenant-payment-instructions-method--legend": "Podstanaru prikaži upute za uplatu:",
"tenant-payment-instructions-method--none": "ne prikazuj upute za uplatu",
"tenant-payment-instructions-method--iban": "uplata na IBAN",
"tenant-payment-instructions-method--iban-disabled": "uplata na IBAN - onemogućeno u app postavkama",
"tenant-payment-instructions-method--revolut": "uplata na Revolut",
"tenant-payment-instructions-method--disabled-message": "VAŽNO: Upute za uplatu nisu dostupne jer niti IBAN niti Revolut metode plaćanja nisu konfigurirane u vašim korisničkim postavkama. Molimo idite u Postavke i omogućite barem jednu metodu plaćanja.",
"tenant--payment-instructions-note": "VAŽNO: za ovu funkcionalnost potrebno je otvoriti postavke aplikacije, te unijeti vaše ime i IBAN.",
"tenant-payment-instructions-method--revolut-disabled": "uplata na Revolut - onemogućeno u app postavkama",
"tenant-payment-instructions-method--disabled-message": "Ova opcija je nedostupna zato što nije omogućena u postavkama aplikacije.",
"iban-payment--form-title": "Informacije za uplatu na IBAN",
"iban-payment--tenant-name-label": "Ime i prezime podstanara",