feat: deal product services

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>
     )
 }