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:
@@ -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} />);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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" ? (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user