added country selector for apllying mask by selecte country

lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx

@@ -1,70 +1,26 @@
-import {
-  FC,
-  useRef,
-  useState,
-  useEffect,
-  Dispatch,
-  SetStateAction,
-} from "react";
-import {
-  Box,
-  Button,
-  InputAdornment,
-  Link,
-  TextField as MuiTextField,
-  TextFieldProps,
-  Typography,
-  useTheme,
-} from "@mui/material";
-import { useIMask } from "react-imask";
+import {useEffect, useRef, useState,} from "react";
+import {Box, Button, Link, Typography, useTheme,} from "@mui/material";
 
-import CustomCheckbox from "@ui_kit/CustomCheckbox";
+import CustomCheckbox from "@ui_kit/CustomCheckbox.tsx";
 
-import AddressIcon from "@icons/ContactFormIcon/AddressIcon";
-import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
-import NameIcon from "@icons/ContactFormIcon/NameIcon";
-import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
-import TextIcon from "@icons/ContactFormIcon/TextIcon";
-
-import { DESIGN_LIST } from "@/utils/designList";
-import { sendFC, SendFCParams } from "@api/quizRelase";
-import { useQuizData } from "@contexts/QuizDataContext";
-import { NameplateLogo } from "@icons/NameplateLogo";
-import { QuizQuestionResult } from "@model/questionTypes/result";
-import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
-import { quizThemes } from "@utils/themes/Publication/themePublication";
-import { enqueueSnackbar } from "notistack";
-import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
+import {DESIGN_LIST} from "@utils/designList.ts";
+import {sendFC, SendFCParams} from "@api/quizRelase.ts";
+import {useQuizData} from "@contexts/QuizDataContext.ts";
+import {NameplateLogo} from "@icons/NameplateLogo.tsx";
+import {QuizQuestionResult} from "@model/questionTypes/result.ts";
+import {AnyTypedQuizQuestion} from "@model/questionTypes/shared.ts";
+import {quizThemes} from "@utils/themes/Publication/themePublication.ts";
+import {enqueueSnackbar} from "notistack";
+import {useRootContainerSize} from "@contexts/RootContainerWidthContext.ts";
 import {
-  FormContactFieldData,
-  FormContactFieldName,
+    FormContactFieldData,
+    FormContactFieldName,
 } from "@model/settingsData.ts";
+import {
+    Inputs
+} from "@/components/ViewPublicationPage/ContactForm/Inputs/Inputs.tsx";
+import {EMAIL_REGEXP} from "@utils/emailRegexp.tsx";
 
-type InputProps = {
-  title: string;
-  desc: string;
-  Icon: FC<{ color: string; backgroundColor: string }>;
-  onChange: TextFieldProps["onChange"];
-  id: string;
-  mask?: string;
-};
-
-type InputsProps = {
-  name: string;
-  setName: Dispatch<SetStateAction<string>>;
-  email: string;
-  setEmail: Dispatch<SetStateAction<string>>;
-  phone: string;
-  setPhone: Dispatch<SetStateAction<string>>;
-  text: string;
-  setText: Dispatch<SetStateAction<string>>;
-  adress: string;
-  setAdress: Dispatch<SetStateAction<string>>;
-};
-
-const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
-const EMAIL_REGEXP =
-  /^(([^<>()[\].,:\s@"]+(\.[^<>()[\].,:\s@"]+)*)|(".+"))@(([^<>()[\].,:\s@"]+\.)+[^<>()[\].,:\s@"]{2,})$/iu;
 
 type Props = {
   currentQuestion: AnyTypedQuizQuestion;
@@ -420,143 +376,3 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
   );
 };
 
-const Inputs = ({
-  name,
-  setName,
-  email,
-  setEmail,
-  phone,
-  setPhone,
-  text,
-  setText,
-  adress,
-  setAdress,
-}: InputsProps) => {
-  const { settings } = useQuizData();
-
-  const FC = settings.cfg.formContact.fields;
-
-  if (!FC) return null;
-  console.log(email);
-  const Name = (
-    <CustomInput
-      onChange={({ target }) => setName(target.value)}
-      id={name}
-      title={FC["name"].innerText || "Введите имя"}
-      desc={FC["name"].text || "Имя"}
-      Icon={NameIcon}
-    />
-  );
-  const Email = (
-    <CustomInput
-      onChange={({ target }) => setEmail(target.value.replaceAll(/\s/g, ""))}
-      id={email}
-      title={FC["email"].innerText || "Введите Email"}
-      desc={FC["email"].text || "Email"}
-      Icon={EmailIcon}
-    />
-  );
-  const Phone = (
-    <CustomInput
-      onChange={({ target }) => setPhone(target.value)}
-      id={phone}
-      title={FC["phone"].innerText || "Введите номер телефона"}
-      desc={FC["phone"].text || "Номер телефона"}
-      Icon={PhoneIcon}
-      mask="+7 (000) 000-00-00"
-    />
-  );
-  const Text = (
-    <CustomInput
-      onChange={({ target }) => setText(target.value)}
-      id={text}
-      title={FC["text"].text || "Введите фамилию"}
-      desc={FC["text"].innerText || "Фамилия"}
-      Icon={TextIcon}
-    />
-  );
-  const Adress = (
-    <CustomInput
-      onChange={({ target }) => setAdress(target.value)}
-      id={adress}
-      title={FC["address"].innerText || "Введите адрес"}
-      desc={FC["address"].text || "Адрес"}
-      Icon={AddressIcon}
-    />
-  );
-
-  if (Object.values(FC).some((data) => data.used)) {
-    return (
-      <>
-        {FC["name"].used ? Name : <></>}
-        {FC["email"].used ? Email : <></>}
-        {FC["phone"].used ? Phone : <></>}
-        {FC["text"].used ? Text : <></>}
-        {FC["address"].used ? Adress : <></>}
-      </>
-    );
-  } else {
-    return (
-      <>
-        {Name}
-        {Email}
-        {Phone}
-      </>
-    );
-  }
-};
-
-const CustomInput = ({ title, desc, Icon, onChange, mask }: InputProps) => {
-  const theme = useTheme();
-  const isMobile = useRootContainerSize() < 600;
-  const { settings } = useQuizData();
-  const { ref } = useIMask({ mask });
-
-  return (
-    <Box m="10px 0">
-      <Typography mb="7px" color={theme.palette.text.primary} fontSize={"16px"}>
-        {title}
-      </Typography>
-
-      <TextField
-        inputRef={ref}
-        onChange={onChange}
-        sx={{
-          width: isMobile ? "100%" : "390px",
-          backgroundColor: theme.palette.background.default,
-          fontSize: "16px",
-          "& .MuiOutlinedInput-notchedOutline": {
-            borderColor: "#9A9AAF80",
-            borderRadius: "12px",
-          },
-          "& .MuiInputBase-root": {
-            paddingLeft: 0,
-          },
-            "& .MuiOutlinedInput-input": {
-                paddingLeft: "10px",
-            },
-          "& .MuiOutlinedInput-root": {
-            "&:hover fieldset": {
-              borderColor: theme.palette.primary.main,
-            },
-          },
-        }}
-        placeholder={desc}
-        InputProps={{
-          startAdornment: (
-            <InputAdornment position="start">
-              <Icon
-                color="gray"
-                backgroundColor={
-                  quizThemes[settings.cfg.theme].isLight
-                    ? "#F2F3F7"
-                    : "#F2F3F71A"
-                }
-              />
-            </InputAdornment>
-          ),
-        }}
-      />
-    </Box>
-  );
-};

lib/components/ViewPublicationPage/ContactForm/CustomInput/CountrySelector/CountrySelector.tsx

@@ -0,0 +1,56 @@
+import {MenuItem, Select, SelectChangeEvent, useTheme} from "@mui/material";
+import {Dispatch, FC, SetStateAction, useState} from "react";
+import {phoneMasksByCountry} from "@utils/phoneMasksByCountry.tsx";
+import {Value} from "react-phone-number-input";
+
+type CountrySelectorProps = {
+    setMask: Dispatch<SetStateAction<string>>;
+}
+
+export const CountrySelector:FC<CountrySelectorProps> = ({setMask}) => {
+    const theme = useTheme();
+    const [country, setCountry] = useState('RU');
+
+    const handleChange = (e: SelectChangeEvent<Value>) => {
+        setCountry(e.target.value);
+        setMask(phoneMasksByCountry[e.target.value][1]);
+    };
+    return (
+        <Select
+            value={country}
+            onChange={handleChange}
+            renderValue={(value) => value}
+            sx={{
+                minWidth: 50,
+                backgroundColor: theme.palette.background.default,
+                "& .MuiSelect-select": {
+                    paddingLeft: "5px",
+                    paddingRight: "5px",
+                    color: 'gray',
+                    fontSize: "12px",
+                    border: "none",
+                },
+                "& .MuiOutlinedInput-notchedOutline": {
+                    border: "none",
+                },
+                "&:hover .MuiOutlinedInput-notchedOutline": {
+                    border: "none",
+                },
+                "&:hover:before": {
+                    border: "none",
+                },
+                "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                    border: "none",
+                },
+                "&.Mui-focused:hover .MuiOutlinedInput-notchedOutline": {
+                    border: "none",
+                },
+            }}
+        >
+            {Object.keys(phoneMasksByCountry).map((countryCode) => {
+                return <MenuItem value={countryCode}>{phoneMasksByCountry[countryCode][0]}</MenuItem>
+            })}
+        </Select>
+    );
+};
+

lib/components/ViewPublicationPage/ContactForm/CustomInput/CustomInput.tsx

@@ -0,0 +1,91 @@
+import {
+    Box,
+    InputAdornment,
+    TextField as MuiTextField,
+    TextFieldProps,
+    Typography,
+    useTheme
+} from "@mui/material";
+import {useRootContainerSize} from "@contexts/RootContainerWidthContext.ts";
+import {useQuizData} from "@contexts/QuizDataContext.ts";
+import {useIMask} from "react-imask";
+import {quizThemes} from "@utils/themes/Publication/themePublication.ts";
+import {FC, useState} from "react";
+import {
+    CountrySelector
+} from "@/components/ViewPublicationPage/ContactForm/CustomInput/CountrySelector/CountrySelector.tsx";
+import {phoneMasksByCountry} from "@utils/phoneMasksByCountry.tsx";
+
+type InputProps = {
+    title: string;
+    desc: string;
+    Icon: FC<{ color: string; backgroundColor: string }>;
+    onChange: TextFieldProps["onChange"];
+    id: string;
+    isPhone?:boolean
+};
+
+const TextField = MuiTextField as unknown as FC<TextFieldProps>;
+
+
+export const CustomInput = ({ title, desc, Icon, onChange ,isPhone}: InputProps) => {
+    const theme = useTheme();
+    const isMobile = useRootContainerSize() < 600;
+    const { settings } = useQuizData();
+    const [mask, setMask] = useState(phoneMasksByCountry['RU'][1]);
+    const { ref } = useIMask({mask});
+    return (
+        <Box m="10px 0">
+            <Typography mb="7px" color={theme.palette.text.primary} fontSize={"16px"}>
+                {title}
+            </Typography>
+
+            <TextField
+                inputRef={isPhone? ref : null}
+                onChange={onChange}
+                sx={{
+                    width: isMobile ? "100%" : "390px",
+                    backgroundColor: theme.palette.background.default,
+                    fontSize: "16px",
+                    "& .MuiOutlinedInput-notchedOutline": {
+                        borderColor: "#9A9AAF80",
+                        borderRadius: "12px",
+                    },
+                    "& .MuiInputBase-root": {
+                        paddingLeft: 0,
+                    },
+                    "& .MuiOutlinedInput-input": {
+                        paddingLeft: "10px",
+                    },
+                    "& .MuiOutlinedInput-root": {
+                        "&:hover fieldset": {
+                            borderColor: theme.palette.primary.main,
+                        },
+                    },
+                }}
+                placeholder={desc}
+                InputProps={{
+                    startAdornment: (
+                        <InputAdornment position="start"  >
+                            <Icon
+                                color="gray"
+                                backgroundColor={
+                                    quizThemes[settings.cfg.theme].isLight
+                                        ? "#F2F3F7"
+                                        : "#F2F3F71A"
+                                }
+                            />
+                        </InputAdornment>
+                    ),
+                    endAdornment: (
+                        <InputAdornment position="end">
+                            {isPhone && (
+                                <CountrySelector setMask={setMask} />)}
+                        </InputAdornment>
+                    ),
+                }}
+            />
+
+        </Box>
+    );
+};

lib/components/ViewPublicationPage/ContactForm/Inputs/Inputs.tsx

@@ -0,0 +1,108 @@
+import {useQuizData} from "@contexts/QuizDataContext.ts";
+import NameIcon from "@icons/ContactFormIcon/NameIcon.tsx";
+import EmailIcon from "@icons/ContactFormIcon/EmailIcon.tsx";
+import TextIcon from "@icons/ContactFormIcon/TextIcon.tsx";
+import AddressIcon from "@icons/ContactFormIcon/AddressIcon.tsx";
+import {Dispatch, SetStateAction} from "react";
+import {
+    CustomInput
+} from "@/components/ViewPublicationPage/ContactForm/CustomInput/CustomInput.tsx";
+import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon.tsx";
+
+type InputsProps = {
+    name: string;
+    setName: Dispatch<SetStateAction<string>>;
+    email: string;
+    setEmail: Dispatch<SetStateAction<string>>;
+    phone: string;
+    setPhone: Dispatch<SetStateAction<string>>;
+    text: string;
+    setText: Dispatch<SetStateAction<string>>;
+    adress: string;
+    setAdress: Dispatch<SetStateAction<string>>;
+};
+
+export const Inputs = ({
+                    name,
+                    setName,
+                    email,
+                    setEmail,
+                    phone,
+                    setPhone,
+                    text,
+                    setText,
+                    adress,
+                    setAdress,
+                }: InputsProps) => {
+    const { settings } = useQuizData();
+console.log('phone',phone)
+    const FC = settings.cfg.formContact.fields;
+
+    if (!FC) return null;
+    const Name = (
+        <CustomInput
+            onChange={({ target }) => setName(target.value)}
+            id={name}
+            title={FC["name"].innerText || "Введите имя"}
+            desc={FC["name"].text || "Имя"}
+            Icon={NameIcon}
+        />
+    );
+    const Email = (
+        <CustomInput
+            onChange={({ target }) => setEmail(target.value.replaceAll(/\s/g, ""))}
+            id={email}
+            title={FC["email"].innerText || "Введите Email"}
+            desc={FC["email"].text || "Email"}
+            Icon={EmailIcon}
+        />
+    );
+    const Phone = (
+        <CustomInput
+            onChange={({ target }) => setPhone(target.value)}
+            id={phone}
+            title={FC["phone"].innerText || "Введите номер телефона"}
+            desc={FC["phone"].text || "Номер телефона"}
+            Icon={PhoneIcon}
+            isPhone={true}
+        />
+    );
+    const Text = (
+        <CustomInput
+            onChange={({ target }) => setText(target.value)}
+            id={text}
+            title={FC["text"].text || "Введите фамилию"}
+            desc={FC["text"].innerText || "Фамилия"}
+            Icon={TextIcon}
+        />
+    );
+    const Adress = (
+        <CustomInput
+            onChange={({ target }) => setAdress(target.value)}
+            id={adress}
+            title={FC["address"].innerText || "Введите адрес"}
+            desc={FC["address"].text || "Адрес"}
+            Icon={AddressIcon}
+        />
+    );
+
+    if (Object.values(FC).some((data) => data.used)) {
+        return (
+            <>
+                {FC["name"].used ? Name : <></>}
+                {FC["email"].used ? Email : <></>}
+                {FC["phone"].used ? Phone : <></>}
+                {FC["text"].used ? Text : <></>}
+                {FC["address"].used ? Adress : <></>}
+            </>
+        );
+    } else {
+        return (
+            <>
+                {Name}
+                {Email}
+                {Phone}
+            </>
+        );
+    }
+};

lib/components/ViewPublicationPage/ViewPublicationPage.tsx

@@ -1,21 +1,23 @@
-import { sendAnswer } from "@api/quizRelase";
-import { useQuizData } from "@contexts/QuizDataContext";
-import { ThemeProvider, Typography } from "@mui/material";
-import { useQuizViewStore } from "@stores/quizView";
-import { useQuestionFlowControl } from "@utils/hooks/useQuestionFlowControl";
-import { notReachable } from "@utils/notReachable";
-import { quizThemes } from "@utils/themes/Publication/themePublication";
-import { enqueueSnackbar } from "notistack";
-import { ReactElement, useEffect } from "react";
-import { ContactForm } from "./ContactForm";
-import { Question } from "./Question";
-import { ResultForm } from "./ResultForm";
-import { StartPageViewPublication } from "./StartPageViewPublication";
+import {sendAnswer} from "@api/quizRelase";
+import {useQuizData} from "@contexts/QuizDataContext";
+import {ThemeProvider, Typography} from "@mui/material";
+import {useQuizViewStore} from "@stores/quizView";
+import {useQuestionFlowControl} from "@utils/hooks/useQuestionFlowControl";
+import {notReachable} from "@utils/notReachable";
+import {quizThemes} from "@utils/themes/Publication/themePublication";
+import {enqueueSnackbar} from "notistack";
+import {ReactElement, useEffect} from "react";
+import {Question} from "./Question";
+import {ResultForm} from "./ResultForm";
+import {StartPageViewPublication} from "./StartPageViewPublication";
 import NextButton from "./tools/NextButton";
 import PrevButton from "./tools/PrevButton";
 import QuestionSelect from "./QuestionSelect";
-import { useYandexMetrics } from "@/utils/hooks/useYandexMetrics";
-import { useVKMetrics } from "@/utils/hooks/useVKMetrics";
+import {useYandexMetrics} from "@/utils/hooks/useYandexMetrics";
+import {useVKMetrics} from "@/utils/hooks/useVKMetrics";
+import {
+  ContactForm
+} from "@/components/ViewPublicationPage/ContactForm/ContactForm.tsx";
 
 export default function ViewPublicationPage() {
   const {

lib/utils/emailRegexp.tsx

@@ -0,0 +1,2 @@
+export const EMAIL_REGEXP =
+    /^(([^<>()[\].,:\s@"]+(\.[^<>()[\].,:\s@"]+)*)|(".+"))@(([^<>()[\].,:\s@"]+\.)+[^<>()[\].,:\s@"]{2,})$/iu;

lib/utils/phoneMasksByCountry.tsx

@@ -0,0 +1,85 @@
+
+type PhoneMasksByCountry = {
+    [countryCode: string]: [string, string];
+};
+
+export const phoneMasksByCountry:PhoneMasksByCountry = {
+    // СНГ
+    'RU': ['Russia +7', '+{7} (000) 000-00-00'], // Россия
+    'UA': ['Ukraine +380', '+{380} (00) 000-00-00'], // Украина
+    'BY': ['Belarus +375', '+{375} (00) 000-00-00'], // Беларусь
+    'KZ': ['Kazakhstan +7', '+{7} (000) 000-00-00'], // Казахстан
+    'UZ': ['Uzbekistan +998', '+{998} (00) 000-00-00'], // Узбекистан
+    'TJ': ['Tajikistan +992', '+{992} (00) 000-00-00'], // Таджикистан
+    'KG': ['Kyrgyzstan +996', '+{996} (000) 00-00-00'], // Кыргызстан
+    'TM': ['Turkmenistan +993', '+{993} (00) 00-00-00'], // Туркменистан
+    'AZ': ['Azerbaijan +994', '+{994} (00) 000-00-00'], // Азербайджан
+    'AM': ['Armenia +374', '+{374} (00) 000-000'], // Армения
+    'GE': ['Georgia +995', '+{995} (000) 00-00-00'], // Грузия
+
+    // Европа
+    'DE': ['Germany +49', '+{49} 0000 0000000'], // Германия
+    'FR': ['France +33', '+{33} 0 00 00 00 00'], // Франция
+    'IT': ['Italy +39', '+{39} 000 000 0000'], // Италия
+    'ES': ['Spain +34', '+{34} 000 00 00 00'], // Испания
+    'GB': ['United Kingdom +44', '+{44} 0000 000000'], // Великобритания
+    'PL': ['Poland +48', '+{48} 000 000 000'], // Польша
+    'NL': ['Netherlands +31', '+{31} 00 000 0000'], // Нидерланды
+    'BE': ['Belgium +32', '+{32} 00 00 00 00'], // Бельгия
+    'CH': ['Switzerland +41', '+{41} 00 000 00 00'], // Швейцария
+    'AT': ['Austria +43', '+{43} 000 000 0000'], // Австрия
+    'DK': ['Denmark +45', '+{45} 00 00 00 00'], // Дания
+    'SE': ['Sweden +46', '+{46} 00 000 00 00'], // Швеция
+    'NO': ['Norway +47', '+{47} 000 00 000'], // Норвегия
+    'FI': ['Finland +358', '+{358} 00 000 0000'], // Финляндия
+    'CZ': ['Czech Republic +420', '+{420} 000 000 000'], // Чехия
+    'SK': ['Slovakia +421', '+{421} 000 000 000'], // Словакия
+    'HU': ['Hungary +36', '+{36} 00 000 0000'], // Венгрия
+    'RO': ['Romania +40', '+{40} 000 000 000'], // Румыния
+    'BG': ['Bulgaria +359', '+{359} 00 000 000'], // Болгария
+    'GR': ['Greece +30', '+{30} 000 000 0000'], // Греция
+    'PT': ['Portugal +351', '+{351} 000 000 000'], // Португалия
+    'IE': ['Ireland +353', '+{353} 00 000 0000'], // Ирландия
+
+    // Азия
+    'CN': ['China +86', '+{86} 000 0000 0000'], // Китай
+    'JP': ['Japan +81', '+{81} 000-000-0000'], // Япония
+    'IN': ['India +91', '+{91} 00000 00000'], // Индия
+    'KR': ['South Korea +82', '+{82} 00-0000-0000'], // Южная Корея
+    'ID': ['Indonesia +62', '+{62} 0000 0000 0000'], // Индонезия
+    'TR': ['Turkey +90', '+{90} 000 000 00 00'], // Турция
+    'IL': ['Israel +972', '+{972} 00 000-0000'], // Израиль
+    'SA': ['Saudi Arabia +966', '+{966} 00 000 0000'], // Саудовская Аравия
+    'AE': ['United Arab Emirates +971', '+{971} 00 000 0000'], // ОАЭ
+    'TH': ['Thailand +66', '+{66} 00 000 0000'], // Таиланд
+    'VN': ['Vietnam +84', '+{84} 000 000 000'], // Вьетнам
+    'MY': ['Malaysia +60', '+{60} 00-000 0000'], // Малайзия
+    'PH': ['Philippines +63', '+{63} 000 000 0000'], // Филиппины
+
+    // Северная Америка
+    'US': ['United States +1', '+{1} (000) 000-0000'], // США
+    'CA': ['Canada +1', '+{1} (000) 000-0000'], // Канада
+    'MX': ['Mexico +52', '+{52} 000 000 0000'], // Мексика
+
+    // Южная Америка
+    'BR': ['Brazil +55', '+{55} (00) 0000-0000'], // Бразилия
+    'AR': ['Argentina +54', '+{54} 000 000-0000'], // Аргентина
+    'CO': ['Colombia +57', '+{57} 000 000 0000'], // Колумбия
+    'PE': ['Peru +51', '+{51} 000 000 000'], // Перу
+    'CL': ['Chile +56', '+{56} 00 000 0000'], // Чили
+    'EC': ['Ecuador +593', '+{593} 00 000 0000'], // Эквадор
+    'VE': ['Venezuela +58', '+{58} 000 000 0000'], // Венесуэла
+
+    // Африка
+    'EG': ['Egypt +20', '+{20} 000 000 0000'], // Египет
+    'NG': ['Nigeria +234', '+{234} 000 0000 0000'], // Нигерия
+    'ZA': ['South Africa +27', '+{27} 000 000 0000'], // Южная Африка
+    'MA': ['Morocco +212', '+{212} 00 00 00 00'], // Марокко
+    'DZ': ['Algeria +213', '+{213} 00 00 00 00'], // Алжир
+    'KE': ['Kenya +254', '+{254} 000 000 000'], // Кения
+    'ET': ['Ethiopia +251', '+{251} 00 000 0000'], // Эфиопия
+
+    // Австралия и Океания
+    'AU': ['Australia +61', '+{61} 0000 000 000'], // Австралия
+    'NZ': ['New Zealand +64', '+{64} 00 000 0000'], // Новая Зеландия
+};

package.json

@@ -90,6 +90,8 @@
         "current-device": "^0.10.2",
         "hex-rgb": "^5.0.0",
         "mobile-detect": "^1.4.5",
-        "react-imask": "^7.6.0"
+        "mui-tel-input": "^5.1.2",
+        "react-imask": "^7.6.0",
+        "react-phone-number-input": "^3.4.1"
     }
 }

yarn.lock

@@ -954,6 +954,13 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.73.tgz#cbbbff4c3e85020e042e65a2a836e1d1d5bfad06"
   integrity sha512-GaTgwUNzESSlX9uhTX2RQcwj2KBf/Wda+52TTtuMpgzR2Rvw7NNypQ8BJdc5Wk6osxZHcUZAKip5PtqWsUl31Q==
 
+"@types/node@^20.11.17":
+  version "20.12.8"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.12.8.tgz#35897bf2bfe3469847ab04634636de09552e8256"
+  integrity sha512-NU0rJLJnshZWdE/097cdCBbyW1h4hEg0xpovcoAQYHl8dnEyp/NAOiE45pvc+Bd1Dt+2r94v2eGFpQJ4R7g+2w==
+  dependencies:
+    undici-types "~5.26.4"
+
 "@types/parse-json@^4.0.0":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
@@ -1451,6 +1458,11 @@ ci-info@^3.2.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
   integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
 
+classnames@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -1597,6 +1609,11 @@ country-flag-emoji-polyfill@^0.1.8:
   resolved "https://registry.yarnpkg.com/country-flag-emoji-polyfill/-/country-flag-emoji-polyfill-0.1.8.tgz#d2cfb23dd2f949b80d83eb9822b613bf62957173"
   integrity sha512-Mbah52sADS3gshUYhK5142gtUuJpHYOXlXtLFI3Ly4RqgkmPMvhX9kMZSTqDM8P7UqtSW99eHKFphhQSGXA3Cg==
 
+country-flag-icons@^1.5.11:
+  version "1.5.11"
+  resolved "https://registry.yarnpkg.com/country-flag-icons/-/country-flag-icons-1.5.11.tgz#04c0556728e517a6207946656355698ac6237080"
+  integrity sha512-B+mvFywunkRJs270k7kCBjhogvIA0uNn6GAXv6m2cPn3rrwqZzZVr2gBWcz+Cz7OGVWlcbERlYRIX0S6OGr8Bw==
+
 cross-spawn@^7.0.0, cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -2381,6 +2398,13 @@ ini@2.0.0:
   resolved "https://registry.yarnpkg.com/ini/-/ini-2.0.0.tgz#e5fd556ecdd5726be978fa1001862eacb0a94bc5"
   integrity sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==
 
+input-format@^0.3.10:
+  version "0.3.10"
+  resolved "https://registry.yarnpkg.com/input-format/-/input-format-0.3.10.tgz#e8a8855e2e89e3b1cd995333f6277c14865f0e35"
+  integrity sha512-5cFv/kOZD7Ch0viprVkuYPDkAU7HBZYBx8QrIpQ6yXUWbAQ0+RQ8IIojDJOf/RO6FDJLL099HDSK2KoVZ2zevg==
+  dependencies:
+    prop-types "^15.8.1"
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -2573,6 +2597,11 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+libphonenumber-js@^1.10.55, libphonenumber-js@^1.10.61:
+  version "1.10.61"
+  resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.10.61.tgz#efd350a6283e5d6a804f0cd17dae1f563410241d"
+  integrity sha512-TsQsyzDttDvvzWNkbp/i0fVbzTGJIG0mUu/uNalIaRQEYeJxVQ/FPg+EJgSqfSXezREjM0V3RZ8cLVsKYhhw0Q==
+
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
@@ -2742,6 +2771,14 @@ muggle-string@^0.3.1:
   resolved "https://registry.yarnpkg.com/muggle-string/-/muggle-string-0.3.1.tgz#e524312eb1728c63dd0b2ac49e3282e6ed85963a"
   integrity sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==
 
+mui-tel-input@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/mui-tel-input/-/mui-tel-input-5.1.2.tgz#3e26a3cbe63e10ceed4d6226079fdeafa0257579"
+  integrity sha512-KVco/YT8oFzkuAHvNR8S7kjMzDubGDAY/aUgqI0GnOQb3DXkKgyPIQpwfaO1WLtUgM8whGJqH2onAefOfihHYA==
+  dependencies:
+    "@types/node" "^20.11.17"
+    libphonenumber-js "^1.10.55"
+
 nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
@@ -3022,6 +3059,17 @@ react-is@^18.2.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-phone-number-input@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/react-phone-number-input/-/react-phone-number-input-3.4.1.tgz#c9a73cace2ac4a7c5fd625e1020baae7607a4d49"
+  integrity sha512-guuenZqU/DYvDBFzFdTrppC4rs+q5ybTFHrxEo9VGvX0pPLWM4ZXlRa0llT7LRAvfxX8RjQNnQkkCiTHTzhLZA==
+  dependencies:
+    classnames "^2.5.1"
+    country-flag-icons "^1.5.11"
+    input-format "^0.3.10"
+    libphonenumber-js "^1.10.61"
+    prop-types "^15.8.1"
+
 react-refresh@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"