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
<>