add max payment method for cheque

frontend/src/components/PaymentMethods/Cheque/index.tsx

@@ -1,13 +1,14 @@
 import { t } from "@/config/i18n";
 import type { ContractInputs } from "@/services/resources/contracts";
-import { Group, NumberInput, Stack, Text, TextInput, Title } from "@mantine/core";
+import type { Productor } from "@/services/resources/productors";
+import { Group, NumberInput, Stack, TextInput, Title } from "@mantine/core";
 import type { UseFormReturnType } from "@mantine/form";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 
 export type ContractChequeProps = {
     inputForm: UseFormReturnType<ContractInputs>;
     price: number;
-    chequeOrder: string;
+    productor: Productor;
 };
 
 export type Cheque = {
@@ -15,7 +16,7 @@ export type Cheque = {
     value: string;
 };
 
-export function ContractCheque({ inputForm, price, chequeOrder }: ContractChequeProps) {
+export function ContractCheque({ inputForm, price, productor }: ContractChequeProps) {
     useEffect(() => {
         if (!inputForm.values.payment_method.includes("cheque")) {
             return;
@@ -41,9 +42,13 @@ export function ContractCheque({ inputForm, price, chequeOrder }: ContractCheque
         // 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]);
+
     return (
         <Stack>
-            <Title order={4}>{`${t("order name")} : ${chequeOrder}`}</Title>
+            <Title order={4}>{`${t("order name")} : ${paymentMethod?.details}`}</Title>
             <NumberInput
                 label={t("cheque quantity", { capfirst: true })}
                 placeholder={t("enter cheque quantity", { capfirst: true })}
@@ -52,7 +57,7 @@ export function ContractCheque({ inputForm, price, chequeOrder }: ContractCheque
                     { capfirst: true },
                 )}
                 min={1}
-                max={3}
+                max={paymentMethod?.max || 3}
                 {...inputForm.getInputProps(`cheque_quantity`)}
             />
             <Group grow>
@@ -64,7 +69,7 @@ export function ContractCheque({ inputForm, price, chequeOrder }: ContractCheque
                             {...inputForm.getInputProps(`cheques.${index}.name`)}
                             error={
                             cheque.name == "" ? 
-                            <Text size="sm" c="red">{inputForm?.errors.cheques}</Text> :
+                            inputForm?.errors.cheques :
                             null
                         }
                         />   

frontend/src/components/Productors/Modal/index.tsx

@@ -3,7 +3,9 @@ import {
     Group,
     Modal,
     MultiSelect,
+    NumberInput,
     Select,
+    Stack,
     TextInput,
     Title,
     type ModalBaseProps,
@@ -107,6 +109,7 @@ export function ProductorModal({
                                 existing ?? {
                                     name,
                                     details: "",
+                                    max: null,
                                 }
                             );
                         }),
@@ -115,12 +118,19 @@ export function ProductorModal({
             />
             {form.values.payment_methods.map((method, index) =>
                 method.name === "cheque" ? (
-                    <TextInput
-                        key={index}
-                        label={t("order name", { capfirst: true })}
-                        placeholder={t("order name", { capfirst: true })}
-                        {...form.getInputProps(`payment_methods.${index}.details`)}
-                    />
+                    <Stack key={index}>
+                        <TextInput
+                            label={t("order name", { capfirst: true })}
+                            placeholder={t("order name", { capfirst: true })}
+                            {...form.getInputProps(`payment_methods.${index}.details`)}
+                        />
+                        <NumberInput
+                            label={t("max cheque number", { capfirst: true })}
+                            placeholder={t("max cheque number", { capfirst: true })}
+                            description={t("can be empty default to 3", {capfirst: true})}
+                            {...form.getInputProps(`payment_methods.${index}.max`)}
+                        />
+                    </Stack>
                 ) : null,
             )}
             <Group mt="sm" justify="space-between">

frontend/src/pages/Contract/index.tsx

@@ -286,10 +286,7 @@ export function Contract() {
             />
             {inputForm.values.payment_method === "cheque" ? (
                 <ContractCheque
-                    chequeOrder={
-                        form?.productor?.payment_methods.find((el) => el.name === "cheque")
-                            ?.details || ""
-                    }
+                    productor={form?.productor}
                     price={price}
                     inputForm={inputForm}
                 />

frontend/src/services/resources/productors.ts

@@ -9,6 +9,7 @@ export const PaymentMethods = [
 export type PaymentMethod = {
     name: string;
     details: string;
+    max: number | null;
 };
 
 export type Productor = {