93 lines
1.9 KiB
TypeScript
93 lines
1.9 KiB
TypeScript
import type { FC } from "react";
|
|
|
|
import { Select, Stack, Text, TextInput } from "@mantine/core";
|
|
import { DateInput } from "@mantine/dates";
|
|
|
|
import { bankToday } from "../../model/form-validation";
|
|
import { useBankCardFieldsVm } from "./BankCardFields.vm";
|
|
|
|
type BankCardFieldsProps = { archived: boolean };
|
|
|
|
const BankCardFields: FC<BankCardFieldsProps> = (props) => {
|
|
const {
|
|
errors,
|
|
onPaymentSystemChange,
|
|
openingDate,
|
|
paymentSystemField,
|
|
paymentSystems,
|
|
register,
|
|
t,
|
|
} = useBankCardFieldsVm();
|
|
|
|
return (
|
|
<Stack>
|
|
<TextInput
|
|
label={t("bank.name")}
|
|
required
|
|
{...register("name")}
|
|
error={errors.name?.message}
|
|
/>
|
|
|
|
<TextInput
|
|
label={t("bank.bankName")}
|
|
{...register("bankName")}
|
|
error={errors.bankName?.message}
|
|
/>
|
|
|
|
<TextInput
|
|
inputMode="numeric"
|
|
label={t("bank.lastFour")}
|
|
{...register("lastFour")}
|
|
error={errors.lastFour?.message}
|
|
/>
|
|
|
|
<Select
|
|
{...paymentSystemField}
|
|
clearable
|
|
comboboxProps={{ withinPortal: false }}
|
|
data={paymentSystems}
|
|
error={errors.paymentSystem?.message}
|
|
label={t("bank.paymentSystem")}
|
|
onChange={onPaymentSystemChange}
|
|
placeholder={t("bank.paymentSystemUnknown")}
|
|
value={
|
|
paymentSystemField.value
|
|
|| null
|
|
}
|
|
/>
|
|
|
|
<TextInput
|
|
inputMode="decimal"
|
|
label={t("bank.openingBalance")}
|
|
readOnly={props.archived}
|
|
required
|
|
{...register("openingBalance")}
|
|
error={errors.openingBalance?.message}
|
|
/>
|
|
|
|
<DateInput
|
|
{...openingDate}
|
|
error={errors.openingDate?.message}
|
|
fixOnBlur={false}
|
|
label={t("bank.openingDate")}
|
|
maxDate={bankToday()}
|
|
popoverProps={{
|
|
middlewares: { shift: { crossAxis: true } },
|
|
withinPortal: false,
|
|
}}
|
|
readOnly={props.archived}
|
|
required
|
|
valueFormat="DD.MM.YYYY"
|
|
/>
|
|
|
|
<Text c="dimmed" size="sm">
|
|
{t("bank.openingHint")}
|
|
</Text>
|
|
|
|
{props.archived && <Text>{t("bank.archiveHint")}</Text>}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export { BankCardFields };
|