From 830578c2e40a6fd1861d2735556e23cc4dbe0e53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikola=20Dere=C5=BEi=C4=87?= Date: Mon, 24 Nov 2025 17:02:09 +0100 Subject: [PATCH] refactor: improve payment method dropdown UX with inline disabled labels MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- app/ui/LocationEditForm.tsx | 26 +++++++++++++++----------- messages/en.json | 5 +++-- messages/hr.json | 6 +++--- 3 files changed, 21 insertions(+), 16 deletions(-) diff --git a/app/ui/LocationEditForm.tsx b/app/ui/LocationEditForm.tsx index 00c5e1c..185bc37 100644 --- a/app/ui/LocationEditForm.tsx +++ b/app/ui/LocationEditForm.tsx @@ -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 = ({ location, yearMont className="select input-bordered w-full" name="tenantPaymentMethod" onChange={(e) => handleInputChange("tenantPaymentMethod", e.target.value)} - disabled={!userSettings?.enableIbanPayment && !userSettings?.enableRevolutPayment} > - - + + - { - !userSettings?.enableIbanPayment && !userSettings?.enableRevolutPayment && ( - {t("tenant-payment-instructions-method--disabled-message")} - ) - } - { formValues.tenantPaymentMethod === "iban" ? ( + { formValues.tenantPaymentMethod === "iban" && userSettings?.enableIbanPayment ? ( <>
{t("iban-payment--form-title")}
@@ -185,7 +190,6 @@ export const LocationEditForm: FC = ({ location, yearMont ))}
- {t("tenant--payment-instructions-note")} ) : // ELSE include hidden inputs to preserve existing values <> diff --git a/messages/en.json b/messages/en.json index c3644c2..29be3d5 100644 --- a/messages/en.json +++ b/messages/en.json @@ -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", diff --git a/messages/hr.json b/messages/hr.json index 419d324..f9b549b 100644 --- a/messages/hr.json +++ b/messages/hr.json @@ -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",