feat: deal product services

src/components/Dnd/DealSummaryCard/DealSummaryCard.tsx

@@ -24,6 +24,8 @@ const DealSummaryCard: FC<Props> = ({dealSummary}) => {
         const currentDate = new Date();
         const diff = deadlineDate.getTime() - currentDate.getTime();
         const diffDays = Math.ceil(diff / (1000 * 3600 * 24));
+        if (diffDays < 0)
+            return 'grey.8'; // for past deadlines
         if (diffDays === 1) {
             return 'yellow.8';
         }

src/components/ObjectSelect/ObjectSelect.tsx

@@ -1,7 +1,7 @@
 import {Select, SelectProps} from "@mantine/core";
 import {useEffect, useMemo, useState} from "react";
 import {ObjectWithNameAndId} from "../../types/utils.ts";
-import {groupBy} from "lodash";
+import {groupBy, omit} from "lodash";
 
 
 export type SelectObjectType<T extends ObjectWithNameAndId> = T;
@@ -16,6 +16,7 @@ type RestProps<T extends ObjectWithNameAndId> = {
     onChange: (value: SelectObjectType<T>) => void;
     data: SelectObjectType<T>[];
     groupBy?: (item: SelectObjectType<T>) => string;
+    filterBy?: (item: SelectObjectType<T>) => boolean;
 }
 
 export type ObjectSelectProps<T extends ObjectWithNameAndId> =
@@ -30,8 +31,10 @@ const ObjectSelect = <T extends ObjectWithNameAndId, >(props: ObjectSelectProps<
     const value = isControlled ? props.value : internalValue;
 
     const data = useMemo(() => {
+        const propsData = props.filterBy ? props.data.filter(props.filterBy) : props.data;
         if (props.groupBy) {
-            const groupedData = groupBy(props.data, props.groupBy);
+
+            const groupedData = groupBy(propsData, props.groupBy);
             return Object.entries(groupedData).map(([group, items]) => ({
                 group,
                 items: items.map(item => ({
@@ -40,7 +43,7 @@ const ObjectSelect = <T extends ObjectWithNameAndId, >(props: ObjectSelectProps<
                 }))
             }));
         } else {
-            return props.data.map(item => ({
+            return propsData.map(item => ({
                 label: item.name,
                 value: item.id.toString()
             }));
@@ -62,10 +65,10 @@ const ObjectSelect = <T extends ObjectWithNameAndId, >(props: ObjectSelectProps<
         if (isControlled || !internalValue) return;
         props.onChange(internalValue);
     }, [internalValue]);
-
+    const restProps = omit(props, ['filterBy', 'groupBy']);
     return (
         <Select
-            {...props}
+            {...restProps}
             value={value?.id.toString()}
             onChange={handleOnChange}
             data={data}

src/components/ProductSelect/ProductSelect.tsx

@@ -1,6 +1,5 @@
 import {ProductSchema} from "../../client";
-import {Select, SelectProps} from "@mantine/core";
-import {FC, useEffect, useMemo, useState} from "react";
+import {FC} from "react";
 import useProductsList from "../../pages/ProductsPage/hooks/useProductsList.tsx";
 import {omit} from "lodash";
 import ObjectSelect, {ObjectSelectProps} from "../ObjectSelect/ObjectSelect.tsx";

src/components/ServiceWithPriceInput/ServiceWithPriceInput.tsx

@@ -1,27 +1,37 @@
 import {ObjectSelectProps} from "../ObjectSelect/ObjectSelect.tsx";
 import {ServiceSchema} from "../../client";
-import {Flex, FlexProps, NumberInput, NumberInputProps, rem} from "@mantine/core";
-import {FC, useEffect, useState} from "react";
+import {ActionIcon, Flex, FlexProps, NumberInput, NumberInputProps, rem} from "@mantine/core";
+import {FC, useEffect, useRef, useState} from "react";
 import ServiceSelectNew from "../Selects/ServiceSelectNew/ServiceSelectNew.tsx";
+import {ServiceType} from "../../shared/enums/ServiceType.ts";
+import {IconReload, IconTrash, IconUpload} from "@tabler/icons-react";
 
 type ServiceProps = Omit<ObjectSelectProps<ServiceSchema>, 'data'>;
 type PriceProps = NumberInputProps;
 
 type Props = {
     serviceProps: ServiceProps,
-    priceProps: PriceProps
-    quantity: number;
-    containerProps: FlexProps
+    priceProps: PriceProps,
+    quantity: number,
+    containerProps: FlexProps,
+    filterType?: ServiceType
 }
-const ServiceWithPriceInput: FC<Props> = ({serviceProps, priceProps, quantity, containerProps}) => {
+const ServiceWithPriceInput: FC<Props> = ({
+                                              serviceProps,
+                                              priceProps,
+                                              quantity,
+                                              containerProps,
+                                              filterType = ServiceType.PRODUCT_SERVICE
+                                          }) => {
     const [price, setPrice] = useState<number | undefined>(
         typeof priceProps.value === 'number' ? priceProps.value : undefined);
     const [service, setService] = useState<ServiceSchema | undefined>(serviceProps.value);
-
+    const isFirstRender = useRef(true);
     const setPriceBasedOnQuantity = (): boolean => {
         if (!service || !service.priceRanges.length) return false;
         const range = service.priceRanges.find(priceRange =>
             quantity >= priceRange.fromQuantity && quantity <= priceRange.toQuantity) || service.priceRanges[0];
+
         setPrice(range.price);
         return true;
     }
@@ -38,34 +48,56 @@ const ServiceWithPriceInput: FC<Props> = ({serviceProps, priceProps, quantity, c
         setPrice(value);
     }
     useEffect(() => {
+        if (isFirstRender.current) return;
+
         setPriceBasedOnQuantity();
     }, [quantity]);
 
     useEffect(() => {
-        if (!priceProps.onChange || !price) return;
+        if (isFirstRender.current) return;
+
+        if (!priceProps.onChange || typeof price === 'undefined') return;
         priceProps.onChange(price);
     }, [price]);
 
     useEffect(() => {
+        // if (!isFirstRender) setPrice(0);
+        // if (isFirstRender.current && price) return;
         if (!serviceProps.onChange || !service) return;
+        if (price && isFirstRender.current) return;
         setPriceBasedOnService();
         serviceProps.onChange(service);
     }, [service]);
+    useEffect(() => {
+        console.log('first render')
+        isFirstRender.current = false;
+    }, []);
+
+    const onReload = () => {
+        setPriceBasedOnService();
+    }
     return (
         <Flex
-            {...containerProps}
+            align={"center"}
             gap={rem(10)}
+            {...containerProps}
         >
+
+            <ActionIcon variant={"default"}>
+                <IconReload onClick={() => onReload()}/>
+            </ActionIcon>
             <ServiceSelectNew
                 {...serviceProps}
                 value={service}
                 onChange={onServiceManualChange}
+                filterType={filterType}
             />
             <NumberInput
                 {...priceProps}
                 onChange={onPriceManualChange}
                 value={price}
             />
+
         </Flex>
     )
 }