91 lines
3.7 KiB
TypeScript
91 lines
3.7 KiB
TypeScript
import { t } from "@/config/i18n";
|
|
import type { ContractInputs } from "@/services/resources/contracts";
|
|
import type { Productor } from "@/services/resources/productors";
|
|
import { Group, NumberInput, Stack, TextInput, Title } from "@mantine/core";
|
|
import type { UseFormReturnType } from "@mantine/form";
|
|
import { useEffect, useMemo } from "react";
|
|
|
|
export type ContractChequeProps = {
|
|
inputForm: UseFormReturnType<ContractInputs>;
|
|
price: number;
|
|
productor: Productor;
|
|
};
|
|
|
|
export type Cheque = {
|
|
name: string;
|
|
value: string;
|
|
};
|
|
|
|
export function ContractCheque({ inputForm, price, productor }: ContractChequeProps) {
|
|
useEffect(() => {
|
|
if (!inputForm.values.payment_method.includes("cheque")) {
|
|
return;
|
|
}
|
|
const quantity = Number(inputForm.values.cheque_quantity);
|
|
if (!quantity || quantity <= 0) return;
|
|
const cheques = inputForm.values.cheques || [];
|
|
if (cheques.length !== quantity) {
|
|
const newCheques = Array.from({ length: quantity }, (_, i) => ({
|
|
name: cheques[i]?.name ?? "",
|
|
value: cheques[i]?.value ?? 0,
|
|
}));
|
|
inputForm.setFieldValue("cheques", newCheques);
|
|
}
|
|
|
|
const totalCents = Math.round(price * 100);
|
|
const base = Math.floor(totalCents / quantity);
|
|
const rest = totalCents - base * quantity;
|
|
for (let i = 0; i < quantity; i++) {
|
|
const val = (i === quantity - 1 ? base + rest : base) / 100;
|
|
inputForm.setFieldValue(`cheques.${i}.value`, val.toFixed(2));
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [inputForm.values.cheque_quantity, price, inputForm.values.cheques]);
|
|
|
|
const paymentMethod = useMemo(() => {
|
|
return productor?.payment_methods.find((el) => el.name === "cheque");
|
|
}, [productor]);
|
|
|
|
|
|
const maxCheques = useMemo(() => {
|
|
return paymentMethod?.max && paymentMethod?.max !== "" ? Number(paymentMethod?.max) : 3
|
|
}, [paymentMethod])
|
|
|
|
return (
|
|
<Stack>
|
|
<Title order={4}>{`${t("order name", {capfirst: true})} : ${paymentMethod?.details}`}</Title>
|
|
<NumberInput
|
|
clampBehavior="strict"
|
|
label={t("cheque quantity", { capfirst: true })}
|
|
placeholder={t("enter cheque quantity", { capfirst: true })}
|
|
description={t(
|
|
"number of cheques between 1 and 3 cheques also enter your cheques identifiers, value is calculated automatically",
|
|
{ capfirst: true, max: maxCheques },
|
|
)}
|
|
min={1}
|
|
max={maxCheques}
|
|
{...inputForm.getInputProps(`cheque_quantity`)}
|
|
/>
|
|
<Group grow>
|
|
{inputForm.values.cheques.map((cheque, index) => (
|
|
<Stack key={`${index}`}>
|
|
<TextInput
|
|
label={t("cheque id", { capfirst: true })}
|
|
placeholder={t("cheque id", { capfirst: true })}
|
|
{...inputForm.getInputProps(`cheques.${index}.name`)}
|
|
error={cheque.name == "" ? inputForm?.errors.cheques : null}
|
|
/>
|
|
<NumberInput
|
|
readOnly
|
|
label={t("cheque value", { capfirst: true })}
|
|
suffix={"€"}
|
|
placeholder={t("enter cheque value", { capfirst: true })}
|
|
{...inputForm.getInputProps(`cheques.${index}.value`)}
|
|
/>
|
|
</Stack>
|
|
))}
|
|
</Group>
|
|
</Stack>
|
|
);
|
|
}
|