feat: disable payment method select when no payment methods configured

- Add userSettings prop to LocationEditForm to check payment configuration
- Disable payment method dropdown when neither IBAN nor Revolut is enabled
- Force select value to "none" when both methods are disabled
- Disable individual IBAN/Revolut options when not configured
- Display NoteBox warning explaining why payment options are unavailable
- Update LocationEditPage and LocationAddPage to fetch and pass userSettings
- Add English and Croatian translations for disabled state message

This prevents users from configuring location payment methods before setting up their own payment info.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-24 16:48:23 +01:00
parent 88b6b32c3e
commit 600e31e7b1
5 changed files with 39 additions and 16 deletions

View File

@@ -1,6 +1,8 @@
import { LocationEditForm } from '@/app/ui/LocationEditForm';
import { YearMonth } from '@/app/lib/db-types';
import { getUserSettings } from '@/app/lib/actions/userSettingsActions';
export default async function LocationAddPage({ yearMonth }: { yearMonth:YearMonth }) {
return (<LocationEditForm yearMonth={yearMonth} />);
const userSettings = await getUserSettings();
return (<LocationEditForm yearMonth={yearMonth} userSettings={userSettings} />);
}

View File

@@ -1,6 +1,7 @@
import { notFound } from 'next/navigation';
import { LocationEditForm } from '@/app/ui/LocationEditForm';
import { fetchLocationById } from '@/app/lib/actions/locationActions';
import { getUserSettings } from '@/app/lib/actions/userSettingsActions';
export default async function LocationEditPage({ locationId }: { locationId:string }) {
@@ -10,7 +11,9 @@ export default async function LocationEditPage({ locationId }: { locationId:stri
return(notFound());
}
const result = <LocationEditForm location={location} />;
const userSettings = await getUserSettings();
const result = <LocationEditForm location={location} userSettings={userSettings} />;
return (result);
}

View File

@@ -2,26 +2,31 @@
import { TrashIcon } from "@heroicons/react/24/outline";
import { FC, useState } from "react";
import { BillingLocation, YearMonth } from "../lib/db-types";
import { BillingLocation, UserSettings, YearMonth } from "../lib/db-types";
import { updateOrAddLocation } from "../lib/actions/locationActions";
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 */
location: BillingLocation,
/** year adn month at a new billing location should be assigned */
yearMonth?: undefined
yearMonth?: undefined,
/** user settings for payment configuration */
userSettings: UserSettings | null
} | {
/** location which should be edited */
location?: undefined,
/** year adn month at a new billing location should be assigned */
yearMonth: YearMonth
yearMonth: YearMonth,
/** user settings for payment configuration */
userSettings: UserSettings | null
}
export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMonth }) => {
export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMonth, userSettings }) => {
const initialState = { message: null, errors: {} };
const handleAction = updateOrAddLocation.bind(null, location?._id, location?.yearMonth ?? yearMonth);
@@ -83,17 +88,28 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
<legend className="fieldset-legend font-semibold uppercase">{t("tenant-payment-instructions-legend")}</legend>
<InfoBox className="p-1 pt-0 mb-1">{t("tenant-payment-instructions-code-info")}</InfoBox>
<fieldset className="fieldset mt-2 p-2">
<legend className="fieldset-legend">{t("tenant-payment-instructions-method--legend")}</legend>
<select defaultValue={formValues.tenantPaymentMethod} className="select input-bordered w-full" name="tenantPaymentMethod" onChange={(e) => handleInputChange("tenantPaymentMethod", e.target.value)}>
<select
value={(!userSettings?.enableIbanPayment && !userSettings?.enableRevolutPayment) ? "none" : formValues.tenantPaymentMethod}
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">{t("tenant-payment-instructions-method--iban")}</option>
<option value="revolut">{t("tenant-payment-instructions-method--revolut")}</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>
</select>
</fieldset>
{
!userSettings?.enableIbanPayment && !userSettings?.enableRevolutPayment && (
<NoteBox className="p-1 mt-2">{t("tenant-payment-instructions-method--disabled-message")}</NoteBox>
)
}
{ formValues.tenantPaymentMethod === "iban" ? (
<>