feat: deal product services

src/components/ServiceWithPriceInput/ServiceWithPriceInput.tsx

@@ -0,0 +1,73 @@
+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 ServiceSelectNew from "../Selects/ServiceSelectNew/ServiceSelectNew.tsx";
+
+type ServiceProps = Omit<ObjectSelectProps<ServiceSchema>, 'data'>;
+type PriceProps = NumberInputProps;
+
+type Props = {
+    serviceProps: ServiceProps,
+    priceProps: PriceProps
+    quantity: number;
+    containerProps: FlexProps
+}
+const ServiceWithPriceInput: FC<Props> = ({serviceProps, priceProps, quantity, containerProps}) => {
+    const [price, setPrice] = useState<number | undefined>(
+        typeof priceProps.value === 'number' ? priceProps.value : undefined);
+    const [service, setService] = useState<ServiceSchema | undefined>(serviceProps.value);
+
+    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;
+    }
+    const setPriceBasedOnService = () => {
+        if (!service) return;
+        if (setPriceBasedOnQuantity()) return;
+        setPrice(service.price);
+    }
+    const onServiceManualChange = (service: ServiceSchema) => {
+        setService(service);
+    }
+    const onPriceManualChange = (value: number | string) => {
+        if (typeof value !== 'number') return;
+        setPrice(value);
+    }
+    useEffect(() => {
+        setPriceBasedOnQuantity();
+    }, [quantity]);
+
+    useEffect(() => {
+        if (!priceProps.onChange || !price) return;
+        priceProps.onChange(price);
+    }, [price]);
+
+    useEffect(() => {
+        if (!serviceProps.onChange || !service) return;
+        setPriceBasedOnService();
+        serviceProps.onChange(service);
+    }, [service]);
+    return (
+        <Flex
+            {...containerProps}
+            gap={rem(10)}
+        >
+            <ServiceSelectNew
+                {...serviceProps}
+                value={service}
+                onChange={onServiceManualChange}
+            />
+            <NumberInput
+                {...priceProps}
+                onChange={onPriceManualChange}
+                value={price}
+            />
+        </Flex>
+    )
+}
+
+export default ServiceWithPriceInput;