refactor: replace payment dropdown with independent toggles

- Replace showPaymentInstructionsInMonthlyStatement dropdown with enableIbanPayment and enableRevolutPayment boolean toggles
- Update UserSettingsForm to use separate fieldsets for IBAN and Revolut with independent toggle switches
- Add hidden inputs to preserve values when toggles are disabled
- Update validation logic to check enableIbanPayment instead of show2dCodeInMonthlyStatement
- Reorganize translation keys to match new structure (iban-* and revolut-* prefixes)
- Update ViewLocationCard to use enableIbanPayment field

This provides better UX by allowing users to enable both payment methods simultaneously if needed.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-24 14:45:59 +01:00
parent 686bec6c10
commit 632f8888b5
6 changed files with 168 additions and 101 deletions

View File

@@ -79,7 +79,7 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
const { hub3aText, paymentParams } = useMemo(() => {
if(!userSettings?.show2dCodeInMonthlyStatement || !generateTenantCode) {
if(!userSettings?.enableIbanPayment || !generateTenantCode) {
return {
hub3aText: "",
paymentParams: {} as PaymentParams
@@ -107,7 +107,7 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
hub3aText: EncodePayment(paymentParams),
paymentParams
});
}, [userSettings?.show2dCodeInMonthlyStatement, generateTenantCode, locationName, tenantName, tenantStreet, tenantTown, userSettings, monthlyExpense, yearMonth]);
}, []);
return(
<div data-key={_id } className="card card-compact card-bordered max-w-[30em] min-w-[330px] bg-base-100 border-1 border-neutral my-1">
@@ -126,7 +126,7 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
: null
}
{
userSettings?.show2dCodeInMonthlyStatement && generateTenantCode ?
userSettings?.enableIbanPayment && generateTenantCode ?
<>
<p className="max-w-[25em] ml-1 mt-1 mb-1">{t("payment-info-header")}</p>
<ul className="ml-4 mb-3">