From 6acb34271d9db9507f7fc8eaf30d28dff3f5c32b Mon Sep 17 00:00:00 2001
From: fakz9 <fakc445@gmail.com>
Date: Mon, 13 May 2024 07:46:24 +0300
Subject: [PATCH] feat: deal product services

---
 src/client/index.ts                           |   4 +
 src/client/models/BaseEnumListSchema.ts       |   9 ++
 src/client/models/BaseEnumSchema.ts           |   9 ++
 src/client/models/DealProductSchema.ts        |   2 +
 src/client/models/DealServiceSchema.ts        |   1 +
 src/client/models/ServicePriceRangeSchema.ts  |  11 ++
 src/client/models/ServiceSchema.ts            |   3 +
 src/client/services/ServiceService.ts         |  12 +++
 .../Selects/BaseEnumSelect/BaseEnumSelect.tsx |  68 ++++++++++++
 .../ServiceSelectNew/ServiceSelectNew.tsx     |  25 +++++
 .../DealProductServiceTable.tsx               |  30 ++++++
 .../ServicePriceInput/RangePriceInput.tsx     | 100 ++++++++++++++++++
 .../ServicePriceInput/ServicePriceInput.tsx   |  38 +++++++
 .../ServicePriceInput/SinglePriceInput.tsx    |  14 +++
 .../ServiceTypeSelect/ServiceTypeSelect.tsx   |  15 +++
 .../modals/CreateServiceModal.tsx             |  49 ++++++---
 src/routes/test.lazy.tsx                      |  31 +++---
 src/shared/enums/ServiceType.ts               |   4 +
 src/types/utils.ts                            |   6 ++
 19 files changed, 401 insertions(+), 30 deletions(-)
 create mode 100644 src/client/models/BaseEnumListSchema.ts
 create mode 100644 src/client/models/BaseEnumSchema.ts
 create mode 100644 src/client/models/ServicePriceRangeSchema.ts
 create mode 100644 src/components/Selects/BaseEnumSelect/BaseEnumSelect.tsx
 create mode 100644 src/components/Selects/ServiceSelectNew/ServiceSelectNew.tsx
 create mode 100644 src/pages/LeadsPage/components/DealProductsTable/DealProductServiceTable.tsx
 create mode 100644 src/pages/ServicesPage/components/ServicePriceInput/RangePriceInput.tsx
 create mode 100644 src/pages/ServicesPage/components/ServicePriceInput/ServicePriceInput.tsx
 create mode 100644 src/pages/ServicesPage/components/ServicePriceInput/SinglePriceInput.tsx
 create mode 100644 src/pages/ServicesPage/components/ServiceTypeSelect/ServiceTypeSelect.tsx
 create mode 100644 src/shared/enums/ServiceType.ts

diff --git a/src/client/index.ts b/src/client/index.ts
index dd66a79..1bb8ce0 100644
--- a/src/client/index.ts
+++ b/src/client/index.ts
@@ -21,6 +21,8 @@ export type { BarcodeTemplateSchema } from './models/BarcodeTemplateSchema';
 export type { BarcodeTemplateSizeSchema } from './models/BarcodeTemplateSizeSchema';
 export type { BarcodeTemplateUpdateRequest } from './models/BarcodeTemplateUpdateRequest';
 export type { BarcodeTemplateUpdateResponse } from './models/BarcodeTemplateUpdateResponse';
+export type { BaseEnumListSchema } from './models/BaseEnumListSchema';
+export type { BaseEnumSchema } from './models/BaseEnumSchema';
 export type { ClientCreateRequest } from './models/ClientCreateRequest';
 export type { ClientCreateResponse } from './models/ClientCreateResponse';
 export type { ClientDeleteRequest } from './models/ClientDeleteRequest';
@@ -55,6 +57,7 @@ export type { DealDeleteServicesResponse } from './models/DealDeleteServicesResp
 export type { DealGeneralInfoSchema } from './models/DealGeneralInfoSchema';
 export type { DealGetAllResponse } from './models/DealGetAllResponse';
 export type { DealProductSchema } from './models/DealProductSchema';
+export type { DealProductServiceSchema } from './models/DealProductServiceSchema';
 export type { DealQuickCreateRequest } from './models/DealQuickCreateRequest';
 export type { DealQuickCreateResponse } from './models/DealQuickCreateResponse';
 export type { DealSchema } from './models/DealSchema';
@@ -100,6 +103,7 @@ export type { ServiceDeleteRequest } from './models/ServiceDeleteRequest';
 export type { ServiceDeleteResponse } from './models/ServiceDeleteResponse';
 export type { ServiceGetAllCategoriesResponse } from './models/ServiceGetAllCategoriesResponse';
 export type { ServiceGetAllResponse } from './models/ServiceGetAllResponse';
+export type { ServicePriceRangeSchema } from './models/ServicePriceRangeSchema';
 export type { ServiceSchema } from './models/ServiceSchema';
 export type { ServiceUpdateRequest } from './models/ServiceUpdateRequest';
 export type { ServiceUpdateResponse } from './models/ServiceUpdateResponse';
diff --git a/src/client/models/BaseEnumListSchema.ts b/src/client/models/BaseEnumListSchema.ts
new file mode 100644
index 0000000..52732a2
--- /dev/null
+++ b/src/client/models/BaseEnumListSchema.ts
@@ -0,0 +1,9 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { BaseEnumSchema } from './BaseEnumSchema';
+export type BaseEnumListSchema = {
+    items: Array<BaseEnumSchema>;
+};
+
diff --git a/src/client/models/BaseEnumSchema.ts b/src/client/models/BaseEnumSchema.ts
new file mode 100644
index 0000000..89b0fcc
--- /dev/null
+++ b/src/client/models/BaseEnumSchema.ts
@@ -0,0 +1,9 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type BaseEnumSchema = {
+    id: number;
+    name: string;
+};
+
diff --git a/src/client/models/DealProductSchema.ts b/src/client/models/DealProductSchema.ts
index c9ec006..44fecce 100644
--- a/src/client/models/DealProductSchema.ts
+++ b/src/client/models/DealProductSchema.ts
@@ -2,9 +2,11 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
+import type { DealProductServiceSchema } from './DealProductServiceSchema';
 import type { ProductSchema } from './ProductSchema';
 export type DealProductSchema = {
     product: ProductSchema;
+    services: Array<DealProductServiceSchema>;
     quantity: number;
 };
 
diff --git a/src/client/models/DealServiceSchema.ts b/src/client/models/DealServiceSchema.ts
index de738f9..ec6cabd 100644
--- a/src/client/models/DealServiceSchema.ts
+++ b/src/client/models/DealServiceSchema.ts
@@ -6,5 +6,6 @@ import type { ServiceSchema } from './ServiceSchema';
 export type DealServiceSchema = {
     service: ServiceSchema;
     quantity: number;
+    price: number;
 };
 
diff --git a/src/client/models/ServicePriceRangeSchema.ts b/src/client/models/ServicePriceRangeSchema.ts
new file mode 100644
index 0000000..a73e3ea
--- /dev/null
+++ b/src/client/models/ServicePriceRangeSchema.ts
@@ -0,0 +1,11 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type ServicePriceRangeSchema = {
+    id: (number | null);
+    fromQuantity: number;
+    toQuantity: number;
+    price: number;
+};
+
diff --git a/src/client/models/ServiceSchema.ts b/src/client/models/ServiceSchema.ts
index 5d78fa3..61b45dc 100644
--- a/src/client/models/ServiceSchema.ts
+++ b/src/client/models/ServiceSchema.ts
@@ -3,10 +3,13 @@
 /* tslint:disable */
 /* eslint-disable */
 import type { ServiceCategorySchema } from './ServiceCategorySchema';
+import type { ServicePriceRangeSchema } from './ServicePriceRangeSchema';
 export type ServiceSchema = {
     id: number;
     name: string;
     category: ServiceCategorySchema;
     price: number;
+    serviceType: number;
+    priceRanges: Array<ServicePriceRangeSchema>;
 };
 
diff --git a/src/client/services/ServiceService.ts b/src/client/services/ServiceService.ts
index 02c7955..cdd3aef 100644
--- a/src/client/services/ServiceService.ts
+++ b/src/client/services/ServiceService.ts
@@ -2,6 +2,7 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
+import type { BaseEnumListSchema } from '../models/BaseEnumListSchema';
 import type { ServiceCreateCategoryRequest } from '../models/ServiceCreateCategoryRequest';
 import type { ServiceCreateCategoryResponse } from '../models/ServiceCreateCategoryResponse';
 import type { ServiceCreateRequest } from '../models/ServiceCreateRequest';
@@ -118,4 +119,15 @@ export class ServiceService {
             },
         });
     }
+    /**
+     * Get All Service Types
+     * @returns BaseEnumListSchema Successful Response
+     * @throws ApiError
+     */
+    public static getAllServiceTypes(): CancelablePromise<BaseEnumListSchema> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/service/types/get-all',
+        });
+    }
 }
diff --git a/src/components/Selects/BaseEnumSelect/BaseEnumSelect.tsx b/src/components/Selects/BaseEnumSelect/BaseEnumSelect.tsx
new file mode 100644
index 0000000..8df7af4
--- /dev/null
+++ b/src/components/Selects/BaseEnumSelect/BaseEnumSelect.tsx
@@ -0,0 +1,68 @@
+import {BaseEnumListSchema, type CancelablePromise} from "../../../client";
+import {FC, useEffect, useMemo, useState} from "react";
+import {useQuery} from "@tanstack/react-query";
+import {Select, SelectProps} from "@mantine/core";
+import {omit} from "lodash";
+
+type ControlledValueProps = {
+    value: number,
+    onChange: (value: number) => void;
+}
+
+
+type RestProps = {
+    defaultValue?: number;
+    onChange: (value: number) => void;
+    fetchFn: () => CancelablePromise<BaseEnumListSchema>;
+    queryKey: string;
+}
+export type BaseEnumSelectProps =
+    (RestProps & Partial<ControlledValueProps>)
+    & Omit<SelectProps, 'value' | 'onChange' | 'data' | 'defaultValue'>;
+
+export type EnumSelectProps = Omit<BaseEnumSelectProps, 'fetchFn' | 'queryKey'>;
+
+const BaseEnumSelect: FC<BaseEnumSelectProps> = (props: BaseEnumSelectProps) => {
+    const {data: queryData = []} = useQuery({
+        queryKey: [props.queryKey],
+        queryFn: props.fetchFn,
+        select: data => data.items || []
+    })
+    const isControlled = 'value' in props;
+    const [internalValue, setInternalValue] = useState<number | undefined>(props.defaultValue);
+    const value = isControlled ? props.value : internalValue;
+    const selectData = useMemo(() => queryData.reduce((acc, item) => {
+        acc.push({
+            label: item.name,
+            value: item.id.toString()
+        });
+        return acc;
+    }, [] as { label: string, value: string }[]), [queryData]);
+    const handleOnChange = (event: string | null) => {
+        if (typeof event === 'undefined' || event === null) return;
+        const object = queryData.find(item => event == item.id.toString());
+        if (!object) return;
+        if (isControlled) {
+            props.onChange(parseInt(event));
+            return;
+        }
+        setInternalValue(parseInt(event));
+    }
+    const restProps = omit(props, ['fetchFn', 'queryKey'])
+    useEffect(() => {
+        if (isControlled || typeof internalValue === 'undefined') return;
+        props.onChange(internalValue);
+    }, [internalValue]);
+    return (
+        <Select
+
+            {...restProps}
+            defaultValue={props.defaultValue ? props.defaultValue.toString() : undefined}
+            value={value?.toString()}
+            onChange={handleOnChange}
+            data={selectData}
+        />
+    )
+}
+
+export default BaseEnumSelect;
\ No newline at end of file
diff --git a/src/components/Selects/ServiceSelectNew/ServiceSelectNew.tsx b/src/components/Selects/ServiceSelectNew/ServiceSelectNew.tsx
new file mode 100644
index 0000000..a8807c1
--- /dev/null
+++ b/src/components/Selects/ServiceSelectNew/ServiceSelectNew.tsx
@@ -0,0 +1,25 @@
+import {FC} from "react";
+import ObjectSelect, {ObjectSelectProps} from "../../ObjectSelect/ObjectSelect.tsx";
+import {ServiceSchema} from "../../../client";
+import useServicesList from "../../../pages/ServicesPage/hooks/useServicesList.tsx";
+import {omit} from "lodash";
+import {ServiceType} from "../../../shared/enums/ServiceType.ts";
+
+
+type RestProps = {
+    filterType?: ServiceType;
+}
+type Props = Omit<ObjectSelectProps<ServiceSchema>, 'data'> & RestProps;
+const ServiceSelectNew: FC<Props> = (props: Props) => {
+    const {services} = useServicesList();
+    const data = props.filterType ? services.filter(service => service.serviceType === props.filterType) : services;
+    const restProps = omit(props, ['filterType']);
+
+    return (
+        <ObjectSelect
+            {...restProps}
+            data={data}
+        />
+    )
+}
+export default ServiceSelectNew;
\ No newline at end of file
diff --git a/src/pages/LeadsPage/components/DealProductsTable/DealProductServiceTable.tsx b/src/pages/LeadsPage/components/DealProductsTable/DealProductServiceTable.tsx
new file mode 100644
index 0000000..104d105
--- /dev/null
+++ b/src/pages/LeadsPage/components/DealProductsTable/DealProductServiceTable.tsx
@@ -0,0 +1,30 @@
+import {Checkbox, Flex, NumberInput} from "@mantine/core";
+import ServiceSelectNew from "../../../../components/Selects/ServiceSelectNew/ServiceSelectNew.tsx";
+import {ServiceType} from "../../../../shared/enums/ServiceType.ts";
+import {useForm} from "@mantine/form";
+import {DealProductServiceSchema} from "../../../../client";
+
+const DealProductServiceTable = () => {
+    const initialValues: Partial<DealProductServiceSchema> = {}
+    const form = useForm<Partial<DealProductServiceSchema>>(
+    );
+    return (
+        <Flex direction={"column"}>
+            <ServiceSelectNew
+                filterType={ServiceType.PRODUCT_SERVICE}
+                onChange={() => {
+                }}/>
+            <NumberInput
+                label={"Количество"}
+            />
+            <Checkbox
+                label={"Привязать количество услуг к количеству товара"}
+            />
+            <NumberInput
+                label={"Цена за единицу"}
+            />
+
+        </Flex>
+    )
+}
+export default DealProductServiceTable;
\ No newline at end of file
diff --git a/src/pages/ServicesPage/components/ServicePriceInput/RangePriceInput.tsx b/src/pages/ServicesPage/components/ServicePriceInput/RangePriceInput.tsx
new file mode 100644
index 0000000..ad93c43
--- /dev/null
+++ b/src/pages/ServicesPage/components/ServicePriceInput/RangePriceInput.tsx
@@ -0,0 +1,100 @@
+import {BaseFormInputProps} from "../../../../types/utils.ts";
+import {ServicePriceRangeSchema} from "../../../../client";
+import {FC, useEffect, useState} from "react";
+import {ActionIcon, Button, Flex, Input, NumberInput, rem} from "@mantine/core";
+import {IconTrash} from "@tabler/icons-react";
+import {isNumber} from "lodash";
+
+export type PriceRangeInputType = BaseFormInputProps<ServicePriceRangeSchema[]>;
+
+const RangePriceInput: FC<PriceRangeInputType> = (props: PriceRangeInputType) => {
+    const {value} = props;
+    const [innerValue, setInnerValue] = useState<ServicePriceRangeSchema[]>(props.value || []);
+    const onAddRange = () => {
+        const newRange = {
+            fromQuantity: 0,
+            toQuantity: 0,
+            price: 0,
+            id: null
+        }
+        setInnerValue([...innerValue, newRange]);
+        props.onChange([...innerValue, newRange]);
+    }
+    const onDeleteRange = (idx: number) => {
+        const newRanges = innerValue.filter((_, i) => i !== idx);
+        setInnerValue(newRanges);
+        props.onChange(newRanges);
+    }
+    const onFromQuantityChange = (idx: number, value: number) => {
+        const newRanges = innerValue.map((item, i) => i === idx ? {
+            ...item,
+            fromQuantity: value
+        } : item);
+        setInnerValue(newRanges);
+        props.onChange(newRanges);
+    }
+    const onToQuantityChange = (idx: number, value: number) => {
+        const newRanges = innerValue.map((item, i) => i === idx ? {
+            ...item,
+            toQuantity: value
+        } : item);
+        setInnerValue(newRanges);
+        props.onChange(newRanges);
+    }
+    const onPriceChange = (idx: number, value: number) => {
+        const newRanges = innerValue.map((item, i) => i === idx ? {
+            ...item,
+            price: value
+        } : item);
+        setInnerValue(newRanges);
+        props.onChange(newRanges);
+    }
+    useEffect(() => {
+        if (props.value === innerValue) return;
+        setInnerValue(props.value || []);
+    }, [value]);
+
+    return (
+        <Input.Wrapper error={props.error} label={"Диапазон цен"}>
+            <Flex direction={"column"} gap={rem(10)}>
+                {innerValue.map((range, idx) => (
+                    <Flex
+                        key={idx}
+                        gap={rem(10)}
+                        align={"flex-end"}
+                    >
+                        <ActionIcon onClick={() => onDeleteRange(idx)} variant={"default"}>
+                            <IconTrash/>
+                        </ActionIcon>
+                        <NumberInput
+                            label={"От количества"}
+                            placeholder={"От"}
+                            hideControls
+                            value={range.fromQuantity}
+                            onChange={event => (event && isNumber(event)) && onFromQuantityChange(idx, event)}
+                        />
+                        <NumberInput
+                            label={"До количества"}
+                            placeholder={"До"}
+                            hideControls
+                            value={range.toQuantity}
+                            onChange={event => (event && isNumber(event)) && onToQuantityChange(idx, event)}
+                        />
+                        <NumberInput
+                            label={"Цена"}
+                            placeholder={"Цена"}
+                            hideControls
+                            value={range.price}
+                            onChange={event => (event && isNumber(event)) && onPriceChange(idx, event)}
+                        />
+
+                    </Flex>
+                ))}
+
+                <Button onClick={onAddRange}>Добавить диапазон</Button>
+            </Flex>
+        </Input.Wrapper>
+
+    )
+}
+export default RangePriceInput
\ No newline at end of file
diff --git a/src/pages/ServicesPage/components/ServicePriceInput/ServicePriceInput.tsx b/src/pages/ServicesPage/components/ServicePriceInput/ServicePriceInput.tsx
new file mode 100644
index 0000000..1a7daf5
--- /dev/null
+++ b/src/pages/ServicesPage/components/ServicePriceInput/ServicePriceInput.tsx
@@ -0,0 +1,38 @@
+import {FC, useState} from "react";
+import {Button, Flex} from "@mantine/core";
+import SinglePriceInput, {PriceInputType} from "./SinglePriceInput.tsx";
+import RangePriceInput, {PriceRangeInputType} from "./RangePriceInput.tsx";
+
+type Props = {
+    singlePriceInputProps: PriceInputType;
+    priceRangeInputProps: PriceRangeInputType;
+}
+
+const ServicePriceInput: FC<Props> = ({priceRangeInputProps, singlePriceInputProps}) => {
+    const [isUsingRange, setIsUsingRange] = useState<boolean>(true);
+    return (
+        <>
+            <Flex
+                direction={"column"}
+                gap={10}
+            >
+                {isUsingRange ?
+                    <RangePriceInput
+                        {...priceRangeInputProps}
+                    /> :
+                    <SinglePriceInput
+                        {...singlePriceInputProps}
+                    />}
+                <Button
+                    variant={"default"}
+                    onClick={() => setIsUsingRange(!isUsingRange)}
+                >
+                    {isUsingRange ? "Использовать одну цену" : "Использовать диапазон цен"}
+                </Button>
+            </Flex>
+        </>
+
+    )
+}
+
+export default ServicePriceInput;
\ No newline at end of file
diff --git a/src/pages/ServicesPage/components/ServicePriceInput/SinglePriceInput.tsx b/src/pages/ServicesPage/components/ServicePriceInput/SinglePriceInput.tsx
new file mode 100644
index 0000000..8b9a25c
--- /dev/null
+++ b/src/pages/ServicesPage/components/ServicePriceInput/SinglePriceInput.tsx
@@ -0,0 +1,14 @@
+import {FC} from "react";
+import {NumberInput, NumberInputProps} from "@mantine/core";
+
+export type PriceInputType = NumberInputProps;
+
+const SinglePriceInput: FC<PriceInputType> = (props) => {
+    return (
+        <NumberInput
+            {...props}
+        />
+    )
+}
+
+export default SinglePriceInput;
\ No newline at end of file
diff --git a/src/pages/ServicesPage/components/ServiceTypeSelect/ServiceTypeSelect.tsx b/src/pages/ServicesPage/components/ServiceTypeSelect/ServiceTypeSelect.tsx
new file mode 100644
index 0000000..1ba8bb0
--- /dev/null
+++ b/src/pages/ServicesPage/components/ServiceTypeSelect/ServiceTypeSelect.tsx
@@ -0,0 +1,15 @@
+import {ServiceService} from "../../../../client";
+import {FC} from "react";
+import BaseEnumSelect, {EnumSelectProps} from "../../../../components/Selects/BaseEnumSelect/BaseEnumSelect.tsx";
+
+
+const ServiceTypeSelect: FC<EnumSelectProps> = (props: EnumSelectProps) => {
+    return (
+        <BaseEnumSelect
+            {...props}
+            fetchFn={ServiceService.getAllServiceTypes}
+            queryKey='getAllServiceTypes'
+        />
+    )
+}
+export default ServiceTypeSelect;
\ No newline at end of file
diff --git a/src/pages/ServicesPage/modals/CreateServiceModal.tsx b/src/pages/ServicesPage/modals/CreateServiceModal.tsx
index 4071408..4587005 100644
--- a/src/pages/ServicesPage/modals/CreateServiceModal.tsx
+++ b/src/pages/ServicesPage/modals/CreateServiceModal.tsx
@@ -1,9 +1,12 @@
-import {ServiceSchema} from "../../../client";
+import {ServicePriceRangeSchema, ServiceSchema} from "../../../client";
 import {useForm} from "@mantine/form";
 import {ContextModalProps} from "@mantine/modals";
 import BaseFormModal, {CreateEditFormProps} from "../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
-import {NumberInput, TextInput} from "@mantine/core";
+import {TextInput} from "@mantine/core";
 import ServiceCategorySelect from "../components/ServiceCategorySelect/ServiceCategorySelect.tsx";
+import ServiceTypeSelect from "../components/ServiceTypeSelect/ServiceTypeSelect.tsx";
+import ServicePriceInput from "../components/ServicePriceInput/ServicePriceInput.tsx";
+import {PriceRangeInputType} from "../components/ServicePriceInput/RangePriceInput.tsx";
 
 type Props = CreateEditFormProps<ServiceSchema>
 const CreateServiceModal = ({
@@ -13,32 +16,35 @@ const CreateServiceModal = ({
                             }: ContextModalProps<Props>) => {
 
     const isEditing = 'onChange' in innerProps;
-    const initialValues: ServiceSchema = isEditing ? {
-        id: innerProps.element.id,
-        name: innerProps.element.name,
-        price: innerProps.element.price,
-        category: innerProps.element.category,
-    } : {
+    const initialValues: ServiceSchema = isEditing ? innerProps.element : {
         id: -1,
         name: '',
         price: 0,
         category: {
             id: -1,
             name: ''
-        }
+        },
+        serviceType: -1,
+        priceRanges: [] as ServicePriceRangeSchema[]
     }
+
     const form = useForm<ServiceSchema>({
         initialValues: initialValues,
         validate: {
             name: (name: string) => name.trim() !== '' ? null : "Необходимо ввести название услуги",
-            price: (price: number) => price > 0 ? null : "Цена должна быть больше 0",
             category: (category: {
                 id: number,
                 name: string
-            }) => category.id !== -1 ? null : "Необходимо выбрать категорию"
+            }) => category.id !== -1 ? null : "Необходимо выбрать категорию",
+            serviceType: (serviceType: number) => serviceType !== -1 ? null : "Необходимо выбрать тип услуги",
+            priceRanges: (value, values) => value.length > 0 || values.price > 0 ? null : "Необходимо добавить хотя бы один диапазон цен или указать цену за единицу услуги",
+            price: (value, values) => value > 0 || values.priceRanges.length > 0 ? null : "Необходимо добавить хотя бы один диапазон цен или указать цену за единицу услуги"
+
         }
     })
 
+
+    console.log(form.values)
     const onCancelClick = () => {
         context.closeContextModal(id);
     }
@@ -62,12 +68,21 @@ const CreateServiceModal = ({
                         label={"Название услуги"}
                         {...form.getInputProps('name')}
                     />
-                    <NumberInput
-                        placeholder={"Введите стоимость услуги"}
-                        label={"Стоимость услуги"}
-                        hideControls
-                        decimalScale={2}
-                        {...form.getInputProps('price')}
+                    <ServiceTypeSelect
+                        placeholder={"Выберите тип услуги"}
+                        label={"Тип услуги"}
+                        {...form.getInputProps('serviceType')}
+                    />
+                    <ServicePriceInput
+                        singlePriceInputProps={{
+                            hideControls: true,
+                            label: "Цена за единицу услуги",
+                            placeholder: "Введите цену за одну услугу",
+                            ...form.getInputProps('price'),
+                        }}
+                        priceRangeInputProps={{
+                            ...form.getInputProps('priceRanges')
+                        } as PriceRangeInputType}
                     />
                 </>
             </BaseFormModal.Body>
diff --git a/src/routes/test.lazy.tsx b/src/routes/test.lazy.tsx
index 60b5e61..bbaedad 100644
--- a/src/routes/test.lazy.tsx
+++ b/src/routes/test.lazy.tsx
@@ -1,26 +1,31 @@
 import {createLazyFileRoute} from "@tanstack/react-router";
-import {useEffect} from "react";
-import {openContextModal} from "@mantine/modals";
+import ServiceSelectNew from "../components/Selects/ServiceSelectNew/ServiceSelectNew.tsx";
+import {ServiceType} from "../shared/enums/ServiceType.ts";
 
 export const Route = createLazyFileRoute('/test')({
     component: TestPage
 })
 
+const data = [{
+    label: "test",
+    value: '0'
+},
+    {
+        label: "test2",
+        value: '1'
+    }
+
+]
+
 function TestPage() {
 
-    useEffect(() => {
-        openContextModal({
-            modal: "barcodeTemplateFormModal",
-            withCloseButton: false,
-            innerProps: {
-                onCreate: () => {
-                }
-            }
-        })
-    }, []);
     return (
         <>
-
+            <ServiceSelectNew
+                filterType={ServiceType.PRODUCT_SERVICE}
+                onChange={() => {
+                }}
+            />
         </>
     );
 }
\ No newline at end of file
diff --git a/src/shared/enums/ServiceType.ts b/src/shared/enums/ServiceType.ts
new file mode 100644
index 0000000..abf179e
--- /dev/null
+++ b/src/shared/enums/ServiceType.ts
@@ -0,0 +1,4 @@
+export enum ServiceType {
+    DEAL_SERVICE,
+    PRODUCT_SERVICE
+}
\ No newline at end of file
diff --git a/src/types/utils.ts b/src/types/utils.ts
index 0b16e30..db1522c 100644
--- a/src/types/utils.ts
+++ b/src/types/utils.ts
@@ -1,4 +1,10 @@
 export type ObjectWithNameAndId = {
     id: number;
     name: string;
+}
+
+export type BaseFormInputProps<T> = {
+    onChange: (value: T) => void;
+    value: T;
+    error?: string | null;
 }
\ No newline at end of file