feat: phone number validation

src/modules/cardModules/cardEditorTabs/ClientTab/ClientTab.tsx

@@ -1,4 +1,4 @@
-import { Button, Fieldset, Group, rem, Stack, Textarea, TextInput } from "@mantine/core";
+import { Button, Fieldset, Group, Input, rem, Stack, Textarea, TextInput } from "@mantine/core";
 import { useCardPageContext } from "../../../../pages/CardsPage/contexts/CardPageContext.tsx";
 import { useForm } from "@mantine/form";
 import { CardService, ClientSchema, ClientService } from "../../../../client";
@@ -7,6 +7,8 @@ import ClientSelect from "../../../../components/Selects/ClientSelect/ClientSele
 import { useEffect, useState } from "react";
 import InlineButton from "../../../../components/InlineButton/InlineButton.tsx";
 import { isEqual } from "lodash";
+import { IMaskInput } from "react-imask";
+import phone from "phone";
 
 const ClientTab = () => {
     const { selectedCard: card, refetchCard } = useCardPageContext();
@@ -17,6 +19,16 @@ const ClientTab = () => {
     const form = useForm<Partial<ClientSchema>>(
         {
             initialValues,
+            validate: {
+                details: {
+                    phoneNumber: value =>
+                        !phone(value || "", {
+                            country: "",
+                            strictDetection: false,
+                            validateMobilePrefix: false,
+                        }).isValid && "Неверно указан номер телефона",
+                },
+            },
         },
     );
 
@@ -76,12 +88,16 @@ const ClientTab = () => {
                         label={"Название"}
                         value={card?.client?.name}
                     />
-                    <TextInput
+                    <Input.Wrapper
-                        disabled={isEditorDisabled()}
+                        label={"Номер телефона"}
-                        placeholder={"Введите телефон"}
+                        error={form.getInputProps("details.phoneNumber").error}>
-                        label={"Телефон клиента"}
+                        <Input
-                        {...form.getInputProps("details.phoneNumber")}
+                            component={IMaskInput}
-                    />
+                            mask="+7 000 000-00-00"
+                            placeholder={"Введите номер телефона"}
+                            {...form.getInputProps("details.phoneNumber")}
+                        />
+                    </Input.Wrapper>
                     <TextInput
                         disabled={isEditorDisabled()}
                         placeholder={"Введите email"}