fix merge

2026-09-07 19:29:27 +02:00
parent 0c4f499878 e69ddf3749
commit 04bcaa2601
17 changed files with 995 additions and 434 deletions
--- a/frontend/src/components/Forms/Card/index.tsx
+++ b/frontend/src/components/Forms/Card/index.tsx
@@ -14,10 +14,10 @@ export function FormCard({ form }: FormCardProps) {
    return (
        <Paper shadow="xl" p="xl">
            <Group justify="start" mb="md">
-                <Tooltip label={t("download base template to print", {capfirst: true})}>
+                <Tooltip label={t("download base template to print", { capfirst: true })}>
                    <ActionIcon
                        variant={"outline"}
-                        aria-label={t("download base template to print", {capfirst: true})}
+                        aria-label={t("download base template to print", { capfirst: true })}
                        onClick={async () => {
                            await contractBaseTemplate.mutateAsync(form.id);
                        }}
@@ -25,10 +25,10 @@ export function FormCard({ form }: FormCardProps) {
                        <IconDownload />
                    </ActionIcon>
                </Tooltip>
-                <Tooltip label={t("fill contract online", {capfirst: true})}>
+                <Tooltip label={t("fill contract online", { capfirst: true })}>
                    <ActionIcon
                        variant={"outline"}
-                        aria-label={t("fill contract online", {capfirst: true})}
+                        aria-label={t("fill contract online", { capfirst: true })}
                        component={Link}
                        to={`/form/${form.id}`}
                        target="_blank"
--- a/frontend/src/components/PaymentMethods/Cheque/index.tsx
+++ b/frontend/src/components/PaymentMethods/Cheque/index.tsx
@@ -46,24 +46,24 @@ export function ContractCheque({ inputForm, price, productor }: ContractChequePr
        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>
+            <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 },
+                    { capfirst: true, min: paymentMethod?.min || 1, max: paymentMethod?.max || 3 },
                )}
-                min={1}
-                max={maxCheques}
+                min={
+                    paymentMethod?.min && paymentMethod?.min !== "" ? Number(paymentMethod?.min) : 1
+                }
+                max={
+                    paymentMethod?.max && paymentMethod?.max !== "" ? Number(paymentMethod?.max) : 3
+                }
                {...inputForm.getInputProps(`cheque_quantity`)}
            />
            <Group grow>
--- a/frontend/src/components/PdfViewer/index.tsx
+++ b/frontend/src/components/PdfViewer/index.tsx
@@ -0,0 +1,17 @@
+export type PdfViewerProps = {
+    file: string;
+};
+
+export function PdfViewer({ file }: PdfViewerProps) {
+    return (
+        <div onContextMenu={(e) => e.preventDefault()}>
+            <iframe
+                src={`${file.toString()}#toolbar=0&navpanes=0`}
+                title="Contract PDF"
+                width="100%"
+                height="800px"
+                style={{ border: 0 }}
+            />
+        </div>
+    );
+}
--- a/frontend/src/components/Productors/Modal/index.tsx
+++ b/frontend/src/components/Productors/Modal/index.tsx
@@ -120,6 +120,7 @@ export function ProductorModal({
                                    name,
                                    details: "",
                                    max: "",
+                                    min: "",
                                }
                            );
                        }),
@@ -134,6 +135,12 @@ export function ProductorModal({
                            placeholder={t("order name", { capfirst: true })}
                            {...form.getInputProps(`payment_methods.${index}.details`)}
                        />
+                        <NumberInput
+                            label={t("min cheque number", { capfirst: true })}
+                            placeholder={t("min cheque number", { capfirst: true })}
+                            description={t("can be empty default to 1", { capfirst: true })}
+                            {...form.getInputProps(`payment_methods.${index}.min`)}
+                        />
                        <NumberInput
                            label={t("max cheque number", { capfirst: true })}
                            placeholder={t("max cheque number", { capfirst: true })}
--- a/frontend/src/pages/Contract/index.tsx
+++ b/frontend/src/pages/Contract/index.tsx
@@ -19,16 +19,24 @@ import {
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { IconDownload, IconMail, IconPhone, IconUser } from "@tabler/icons-react";
-import { useCallback, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useParams } from "react-router";
 import { computePrices } from "./price";
 import { ContractCheque } from "@/components/PaymentMethods/Cheque";
 import { tranformProducts, type ContractInputs } from "@/services/resources/contracts";
 import type { Shipment } from "@/services/resources/shipments";
+import { useDisclosure } from "@mantine/hooks";
+import { ContractRecap } from "./recap";

 export function Contract() {
    const { id } = useParams();
+    const [pdfUrl, setPdfUrl] = useState<string | undefined>();
    const { data: form } = useGetForm(Number(id), { enabled: !!id });
+    const [isRecapModalOpened, { open: openRecapModal, close: closeRecapModal }] =
+        useDisclosure(false);
+    const minCheques = useMemo(() => {
+        return form?.productor?.payment_methods.find((pm) => pm.name === "cheque")?.min;
+    }, [form]);
    const inputForm = useForm<ContractInputs>({
        initialValues: {
            firstname: "",
@@ -58,6 +66,12 @@ export function Contract() {
        },
    });

+    useEffect(() => {
+        if (!form) return;
+        console.log("aze");
+        inputForm.setFieldValue("cheque_quantity", Number(minCheques) || 1);
+    }, [form]);
+
    const createContractMutation = useCreateContract();

    const productsRecurent = useMemo(() => {
@@ -79,8 +93,8 @@ export function Contract() {
                return [...acc, shipment];
            }
            return acc;
-        }, [] as Shipment[])
-    }, [form])
+        }, [] as Shipment[]);
+    }, [form]);

    const price = useMemo(() => {
        if (!allProducts) {
@@ -155,8 +169,10 @@ export function Contract() {
                form_id: form.id,
                products: tranformProducts(withDefaultValues(formValues.products)),
            };
-            await createContractMutation.mutateAsync(contract);
-            window.location.href = "/";
+            const { blob } = await createContractMutation.mutateAsync(contract);
+            const url = URL.createObjectURL(blob);
+            setPdfUrl(url);
+            openRecapModal();
        } else {
            const firstErrorField = Object.keys(errors.errors)[0];
            const ref = inputRefs.current[firstErrorField];
@@ -169,6 +185,7 @@ export function Contract() {
        form,
        createContractMutation,
        withDefaultValues,
+        setPdfUrl,
    ]);

    if (!form || !shipments || !productsRecurent)
@@ -254,7 +271,7 @@ export function Contract() {
                    </List.Item>
                ))}
            </List>
-            <Text>{`${t("there is", { capfirst: true })} ${remainingShipments?.length} ${t("remaining_shipments", {count: remainingShipments?.length})} :`}</Text>
+            <Text>{`${t("there is", { capfirst: true })} ${remainingShipments?.length} ${t("remaining_shipments", { count: remainingShipments?.length })} :`}</Text>
            <List>
                {remainingShipments?.map((shipment) => (
                    <List.Item key={shipment.id}>
@@ -324,6 +341,7 @@ export function Contract() {
                    {t("for transfer method contact your referer or productor", { capfirst: true })}
                </Text>
            ) : null}
+            <ContractRecap opened={isRecapModalOpened} close={closeRecapModal} pdfUrl={pdfUrl} />
            <Space h="15vh"></Space>
            <Overlay
                bg={"lightGray"}
@@ -349,7 +367,7 @@ export function Contract() {
                    aria-label={t("submit contracts")}
                    onClick={handleSubmit}
                >
-                    {t("submit", { capfirst: true })}
+                    {t("submit contract", { capfirst: true })}
                </Button>
            </Overlay>
        </Stack>
--- a/frontend/src/pages/Contract/recap.tsx
+++ b/frontend/src/pages/Contract/recap.tsx
@@ -0,0 +1,70 @@
+import { PdfViewer } from "@/components/PdfViewer";
+import { t } from "@/config/i18n";
+import { Button, Checkbox, Loader, Modal, Stack, Text } from "@mantine/core";
+import { isNotEmpty, useForm } from "@mantine/form";
+import { useState } from "react";
+
+export type ContractRecapProps = {
+    opened: boolean;
+    close: () => void;
+    pdfUrl?: string;
+};
+
+export function ContractRecap({ opened, close, pdfUrl }: ContractRecapProps) {
+    const [viewPdf, setViewPdf] = useState<boolean>(false);
+    const form = useForm({
+        mode: "uncontrolled",
+        initialValues: { terms: false },
+        validate: {
+            terms: isNotEmpty(t("you must accept terms and conditions", { capfirst: true })),
+        },
+    });
+
+    if (!pdfUrl)
+        return (
+            <Modal
+                opened={opened}
+                onClose={close}
+                size="100%"
+                title={t("contract recap", { capfirst: true })}
+            >
+                <Loader></Loader>
+            </Modal>
+        );
+    return (
+        <Modal
+            opened={opened}
+            onClose={close}
+            size={"55rem"}
+            title={t("contract recap", { capfirst: true })}
+        >
+            <Stack>
+                <Text>{t("your contract has been submited", { capfirst: true })}</Text>
+                <Button onClick={() => setViewPdf(!viewPdf)}>
+                    {t("show contract", { capfirst: true })}
+                </Button>
+                {viewPdf ? <PdfViewer file={pdfUrl} /> : null}
+                <form
+                    onSubmit={form.onSubmit(() => {
+                        const link = document.createElement("a");
+                        link.href = pdfUrl;
+                        link.target = "_blank";
+                        link.click();
+                        URL.revokeObjectURL(pdfUrl);
+                    })}
+                >
+                    <Stack>
+                        <Checkbox
+                            label={t("i have read and accept the mutual agreement", {
+                                capfirst: true,
+                            })}
+                            key={form.key("terms")}
+                            {...form.getInputProps("terms", { type: "checkbox" })}
+                        />
+                        <Button type="submit">{t("download contract", { capfirst: true })}</Button>
+                    </Stack>
+                </form>
+            </Stack>
+        </Modal>
+    );
+}
--- a/frontend/src/pages/Productors/index.tsx
+++ b/frontend/src/pages/Productors/index.tsx
@@ -68,6 +68,7 @@ export default function Productors() {
                    name: payment.name,
                    details: payment.details,
                    max: payment.max === "" ? null : payment.max,
+                    min: payment.min === "" ? null : payment.min,
                })),
            });
            closeModal();
@@ -86,6 +87,7 @@ export default function Productors() {
                        name: payment.name,
                        details: payment.details,
                        max: payment.max === "" ? null : payment.max,
+                        min: payment.min === "" ? null : payment.min,
                    })),
                },
            });
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -27,10 +27,17 @@ import { t } from "@/config/i18n";
 import type { DeleteDependencies, EntityName } from "./resources/common";

 export async function refreshToken() {
-    return await fetch(`${Config.backend_uri}/auth/refresh`, {method: "POST", credentials: "include"});
+    return await fetch(`${Config.backend_uri}/auth/refresh`, {
+        method: "POST",
+        credentials: "include",
+    });
 }

-export async function fetchWithAuth(input: RequestInfo, options?: RequestInit, redirect: boolean = true) {
+export async function fetchWithAuth(
+    input: RequestInfo,
+    options?: RequestInit,
+    redirect: boolean = true,
+) {
    const res = await fetch(input, {
        credentials: "include",
        ...options,
@@ -38,12 +45,11 @@ export async function fetchWithAuth(input: RequestInfo, options?: RequestInit, r

    if (res.status === 401) {
        const refresh = await refreshToken();
-        if (refresh.status !== 200) {
-            if (redirect)
-                window.location.href = `/?sessionExpired=True`;
-            
+        if (refresh.status == 400 || refresh.status == 401) {
+            if (redirect) window.location.href = `/?sessionExpired=True`;
+
            const error = new Error("Unauthorized");
-            error.cause = 401
+            error.cause = 401;
            throw error;
        }
        const newRes = await fetch(input, {
@@ -51,10 +57,9 @@ export async function fetchWithAuth(input: RequestInfo, options?: RequestInit, r
            ...options,
        });
        if (newRes.status === 401 || newRes.status === 403) {
-            if (redirect)
-                window.location.href = `/?sessionExpired=True`;
+            if (redirect) window.location.href = `/?sessionExpired=True`;
            const error = new Error("Unauthorized");
-            error.cause = 401
+            error.cause = 401;
            throw error;
        }
        return newRes;
@@ -196,9 +201,7 @@ export function useGetProductors(filters?: URLSearchParams): UseQueryResult<Prod
        queryFn: () =>
            fetchWithAuth(`${Config.backend_uri}/productors${filters ? `?${queryString}` : ""}`, {
                credentials: "include",
-            })
-            .then((res) => res.json()
-        ),
+            }).then((res) => res.json()),
    });
 }

@@ -329,30 +332,28 @@ export function useGetForm(
    });
 }

-export function useGetDeleteDependencies(
-    entity: EntityName,
-    id?: number,
-) {
+export function useGetDeleteDependencies(entity: EntityName, id?: number) {
    return useQuery<DeleteDependencies[]>({
        queryKey: [`${entity}_delete_preview_${id}`],
        queryFn: () =>
            fetchWithAuth(`${Config.backend_uri}/${entity}s/${id}/preview-delete`, {
                credentials: "include",
            }).then((res) => {
-                const result = res.json()
-                return result
+                const result = res.json();
+                return result;
            }),
        enabled: !!id,
    });
 }

-
 export function useGetForms(filters?: URLSearchParams): UseQueryResult<Form[], Error> {
    const queryString = filters?.toString();
    return useQuery<Form[]>({
        queryKey: ["forms", queryString],
        queryFn: () =>
-            fetch(`${Config.backend_uri}/forms${filters ? `?${queryString}` : ""}`).then((res) => res.json()),
+            fetch(`${Config.backend_uri}/forms${filters ? `?${queryString}` : ""}`).then((res) =>
+                res.json(),
+            ),
    });
 }

@@ -361,7 +362,9 @@ export function useGetReferentForms(filters?: URLSearchParams): UseQueryResult<F
    return useQuery<Form[]>({
        queryKey: ["forms", queryString],
        queryFn: () =>
-            fetchWithAuth(`${Config.backend_uri}/forms/referents${filters ? `?${queryString}` : ""}`).then((res) => res.json()),
+            fetchWithAuth(
+                `${Config.backend_uri}/forms/referents${filters ? `?${queryString}` : ""}`,
+            ).then((res) => res.json()),
    });
 }

@@ -749,8 +752,9 @@ export function useGetContractFile() {
 export function useGetContractFileTemplate() {
    return useMutation({
        mutationFn: async (form_id: number) => {
-            const res = await fetchWithAuth(`${Config.backend_uri}/contracts/${form_id}/base`)
-                .then((res) => res);
+            const res = await fetchWithAuth(`${Config.backend_uri}/contracts/${form_id}/base`).then(
+                (res) => res,
+            );

            if (!res.ok) throw new Error();
            const blob = await res.blob();
@@ -772,7 +776,6 @@ export function useGetContractFileTemplate() {
    });
 }

-
 export function useGetRecap() {
    return useMutation({
        mutationFn: async (form_id: number) => {
@@ -848,13 +851,7 @@ export function useCreateContract() {
                    : `contract_${newContract.form_id}.pdf`;
            return { blob, filename };
        },
-        onSuccess: async ({ blob, filename }) => {
-            const url = URL.createObjectURL(blob);
-            const link = document.createElement("a");
-            link.href = url;
-            link.download = filename;
-            link.click();
-            URL.revokeObjectURL(url);
+        onSuccess: async () => {
            await queryClient.invalidateQueries({ queryKey: ["contracts"] });
        },
    });
@@ -906,10 +903,14 @@ export function useCurrentUser() {
    return useQuery<UserLogged>({
        queryKey: ["currentUser"],
        queryFn: () => {
-            return fetchWithAuth(`${Config.backend_uri}/auth/user/me`, {
-                credentials: "include",
-            }, false).then((res) => res.json());
+            return fetchWithAuth(
+                `${Config.backend_uri}/auth/user/me`,
+                {
+                    credentials: "include",
+                },
+                false,
+            ).then((res) => res.json());
        },
        retry: false,
    });
-}
+}
--- a/frontend/src/services/resources/productors.ts
+++ b/frontend/src/services/resources/productors.ts
@@ -10,6 +10,7 @@ export type PaymentMethod = {
    name: string;
    details: string;
    max: number | string | null;
+    min: number | string | null;
 };

 export type Productor = {