84 lines
2.9 KiB
TypeScript
84 lines
2.9 KiB
TypeScript
import { Accordion, Group, Stack, Text } from "@mantine/core";
|
|
import type { Shipment } from "@/services/resources/shipments";
|
|
import { ProductForm } from "@/components/Products/Form";
|
|
import type { UseFormReturnType } from "@mantine/form";
|
|
import { useMemo } from "react";
|
|
import { computePrices } from "@/pages/Contract";
|
|
import { t } from "@/config/i18n";
|
|
|
|
export type ShipmentFormProps = {
|
|
inputForm: UseFormReturnType<Record<string, string | number>>;
|
|
shipment: Shipment;
|
|
minimumPrice?: number | null;
|
|
index: number;
|
|
}
|
|
|
|
export default function ShipmentForm({
|
|
shipment,
|
|
index,
|
|
inputForm,
|
|
minimumPrice,
|
|
}: ShipmentFormProps) {
|
|
const shipmentPrice = useMemo(() => {
|
|
const values = Object
|
|
.entries(inputForm.getValues())
|
|
.filter(([key]) =>
|
|
key.includes("planned") &&
|
|
key.split("-")[1] === String(shipment.id)
|
|
);
|
|
return computePrices(values, shipment.products);
|
|
}, [inputForm, shipment.products]);
|
|
|
|
const priceRequirement = useMemo(() => {
|
|
if (!minimumPrice)
|
|
return false;
|
|
return minimumPrice ? shipmentPrice < minimumPrice : true
|
|
}, [shipmentPrice, minimumPrice])
|
|
|
|
return (
|
|
<Accordion.Item value={String(index)}>
|
|
<Accordion.Control>
|
|
<Group justify="space-between">
|
|
<Text>{shipment.name}</Text>
|
|
<Stack gap={0}>
|
|
<Text c={priceRequirement ? "red" : "green"}>{
|
|
Intl.NumberFormat(
|
|
"fr-FR",
|
|
{style: "currency", currency: "EUR"}
|
|
).format(shipmentPrice)
|
|
}</Text>
|
|
{
|
|
priceRequirement ?
|
|
<Text c="red"size="sm">
|
|
{`${t("minimum price for this shipment should be at least", {capfirst: true})} ${minimumPrice}€`}
|
|
</Text> :
|
|
null
|
|
}
|
|
</Stack>
|
|
<Text mr="lg">
|
|
{`${
|
|
new Date(shipment.date).toLocaleDateString("fr-FR", {
|
|
weekday: "long",
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
})
|
|
}`}
|
|
</Text>
|
|
</Group>
|
|
</Accordion.Control>
|
|
<Accordion.Panel>
|
|
{
|
|
shipment?.products.map((product) => (
|
|
<ProductForm
|
|
key={product.id}
|
|
product={product}
|
|
shipment={shipment}
|
|
inputForm={inputForm}
|
|
/>
|
|
))
|
|
}
|
|
</Accordion.Panel>
|
|
</Accordion.Item>
|
|
);
|
|
} |