feat: gallery

src/App.tsx

@@ -43,6 +43,7 @@ import { isAxiosError } from "axios";
 import RecoverPassword from "./pages/auth/RecoverPassword";
 import { InfoPrivilege } from "./pages/InfoPrivilege";
 import OutdatedLink from "./pages/auth/OutdatedLink";
+import QuizGallery from "./pages/createQuize/QuizGallery";
 import { useAfterpay } from "@utils/hooks/useAfterpay";
 
 const MyQuizzesFull = lazy(() => import("./pages/createQuize/MyQuizzesFull"));
@@ -259,6 +260,7 @@ export default function App() {
             />
           }
         />
+        <Route path="/gallery" element={<QuizGallery />} />
         <Route
           path="/list"
           element={<LazyLoading children={<MyQuizzesFull />} />}

src/pages/createQuize/QuizGallery.tsx

@@ -1,294 +0,0 @@
-import {
-  Box,
-  Button,
-  FormControl,
-  InputAdornment,
-  InputLabel,
-  MenuItem,
-  Select,
-  Tabs,
-  TextField,
-  Typography,
-  useTheme,
-} from "@mui/material";
-import ComplexNavText from "./ComplexNavText";
-import LayoutIconOld from "@icons/LayoutIcon";
-import SearchIcon from "@icons/SearchIcon";
-import SectionWrapper from "@ui_kit/SectionWrapper";
-import ArrowDown from "@icons/ArrowDownIcon";
-import { useState } from "react";
-import { CustomTab } from "./CustomTab";
-import QuizTemplateCard from "./QuizTemplateCard";
-import quizTemplateImage1 from "../../assets/quiz-template-1.png";
-import quizTemplateImage2 from "../../assets/quiz-template-2.png";
-import quizTemplateImage3 from "../../assets/quiz-template-3.png";
-import quizTemplateImage4 from "../../assets/quiz-template-4.png";
-import quizTemplateImage5 from "../../assets/quiz-template-5.png";
-import quizTemplateImage6 from "../../assets/quiz-template-6.png";
-
-const categories = [
-  "Категория 1",
-  "Категория 2",
-  "Категория 3",
-  "Категория 4",
-] as const;
-type Category = (typeof categories)[number];
-
-export default function QuizGallery() {
-  const theme = useTheme();
-  const [category, setCategory] = useState<Category | "">("");
-  const [tabIndex, setTabIndex] = useState<number>(0);
-
-  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
-    setTabIndex(newValue);
-  };
-
-  return (
-    <SectionWrapper
-      maxWidth="lg"
-      sx={{
-        mt: "25px",
-        mb: "74px",
-      }}
-    >
-      <ComplexNavText text1="Галерея quiz" />
-      <Typography variant="h4" mt="20px" mb="40px">
-        Мои quiz
-      </Typography>
-      <Box
-        sx={{
-          backgroundColor: theme.palette.brightPurple.main,
-          width: "100%",
-          borderRadius: "8px",
-          p: "20px",
-          display: "flex",
-          alignItems: "center",
-          mb: "40px",
-        }}
-      >
-        <LayoutIconOld
-          bgcolor="#EEE4FC"
-          height="80px"
-          width="80px"
-          color={theme.palette.brightPurple.main}
-        />
-        <Box
-          sx={{
-            display: "flex",
-            ml: "25px",
-            gap: "30px",
-            alignItems: "baseline",
-          }}
-        >
-          <Typography variant="h4" sx={{ color: "white" }}>
-            Пустой шаблон
-          </Typography>
-          <Typography sx={{ color: "white" }}>
-            Широкий инструментарий создания quiz с нуля
-          </Typography>
-        </Box>
-        <Button
-          variant="contained"
-          sx={{
-            ml: "auto",
-            backgroundColor: "white",
-            color: "black",
-            px: "30.5px",
-            width: "auto",
-          }}
-        >
-          Начать
-        </Button>
-      </Box>
-      <Box
-        sx={{
-          width: "100%",
-        }}
-      >
-        <Box
-          sx={{
-            display: "flex",
-            gap: "2%",
-          }}
-        >
-          <FormControl
-            fullWidth
-            variant="standard"
-            sx={{
-              width: "71%",
-            }}
-          >
-            <TextField
-              fullWidth
-              id="search"
-              placeholder="Поиск шаблонов"
-              sx={{
-                backgroundColor: theme.palette.background.default,
-                "& .MuiInputBase-root": {
-                  height: "45px",
-                  borderRadius: "10px",
-                  pl: "10px",
-                },
-              }}
-              InputProps={{
-                sx: {
-                  borderRadius: "10px",
-                  fontSize: "16px",
-                  lineHeight: "19px",
-                },
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <SearchIcon />
-                  </InputAdornment>
-                ),
-              }}
-            />
-          </FormControl>
-          <FormControl
-            fullWidth
-            size="small"
-            sx={{
-              width: "27%",
-              minWidth: "200px",
-              height: "45px",
-              "& .MuiInputLabel-outlined": {
-                mt: "4px",
-                ml: "-3px",
-              },
-              "& .MuiInputLabel-outlined.MuiInputLabel-shrink": {
-                ml: "3px",
-                mt: "0px",
-              },
-            }}
-          >
-            <InputLabel
-              sx={{
-                color: "black",
-                fontSize: "16px",
-                lineHeight: "19px",
-              }}
-              id="demo-simple-select-label"
-            >
-              Категории
-            </InputLabel>
-            <Select
-              labelId="demo-simple-select-label"
-              id="category-select"
-              label="Категории"
-              variant="outlined"
-              value={category}
-              onChange={(e) => setCategory(e.target.value as Category)}
-              sx={{
-                height: "45px",
-                borderRadius: "10px",
-              }}
-              inputProps={{ sx: { pt: "12px" } }}
-              IconComponent={(props) => <ArrowDown {...props} />}
-            >
-              {categories.map((cat) => (
-                <MenuItem key={cat} value={cat}>
-                  {cat}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-        </Box>
-      </Box>
-      <Tabs
-        TabIndicatorProps={{ sx: { display: "none" } }}
-        value={tabIndex}
-        onChange={handleTabChange}
-        variant="scrollable"
-        scrollButtons={false}
-        sx={{ mt: "15px" }}
-      >
-        <CustomTab value={0} label="Квизы" />
-        <CustomTab value={1} label="Исследования и опросы" />
-        <CustomTab value={2} label="Формы" />
-        <CustomTab value={3} label="Тесты" />
-        <CustomTab value={4} label="E-commerce" />
-      </Tabs>
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "baseline",
-          mt: "28px",
-          mb: "40px",
-        }}
-      >
-        <Typography variant="h5">Квизы</Typography>
-        <Box
-          sx={{
-            flexGrow: 1,
-            width: "auto",
-            height: "10px",
-            borderBottom: "1px solid #9A9AAF",
-            mx: "5px",
-            mb: "0px",
-          }}
-        />
-        <Typography sx={{ color: "#4D4D4D" }}>(3)</Typography>
-      </Box>
-      <Box
-        sx={{
-          display: "flex",
-          gap: "3.5%",
-        }}
-      >
-        <QuizTemplateCard image={quizTemplateImage1} />
-        <QuizTemplateCard image={quizTemplateImage2} />
-        <QuizTemplateCard image={quizTemplateImage3} />
-      </Box>
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "baseline",
-          mt: "50px",
-          mb: "40px",
-        }}
-      >
-        <Typography variant="h5">Исследования и опросы</Typography>
-        <Box
-          sx={{
-            flexGrow: 1,
-            width: "auto",
-            height: "10px",
-            borderBottom: "1px solid #9A9AAF",
-            mx: "5px",
-            mb: "0px",
-          }}
-        />
-        <Typography sx={{ color: "#4D4D4D" }}>(3)</Typography>
-      </Box>
-      <Box
-        sx={{
-          display: "flex",
-          gap: "3.5%",
-        }}
-      >
-        <QuizTemplateCard image={quizTemplateImage4} />
-        <QuizTemplateCard image={quizTemplateImage5} />
-        <QuizTemplateCard image={quizTemplateImage6} />
-      </Box>
-      <Box
-        sx={{
-          width: "100%",
-          borderBottom: "1px solid #9A9AAF",
-          mt: "50px",
-        }}
-      />
-      <Typography mt="30px" variant="h4">
-        Нет подходящего шаблона?
-      </Typography>
-      <Button
-        variant="contained"
-        sx={{
-          px: "20px",
-          mt: "30px",
-        }}
-      >
-        Создать квиз с нуля
-      </Button>
-    </SectionWrapper>
-  );
-}

src/pages/createQuize/QuizGallery/QuizTemplateCard.tsx

@@ -1,19 +1,41 @@
-import { Box, Chip, Typography, useTheme } from "@mui/material";
+import { Box, Chip, Typography, useTheme, useMediaQuery } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import { enqueueSnackbar } from "notistack";
+
+import { quizApi } from "@/api/quiz";
+import { setEditQuizId } from "@root/quizes/actions";
 
 interface Props {
   image: string;
+  quizId: number;
 }
 
-export default function QuizTemplateCard({ image }: Props) {
+export default function QuizTemplateCard({ image, quizId }: Props) {
+  const navigate = useNavigate();
   const theme = useTheme();
+  const isTablet = useMediaQuery(theme.breakpoints.down("md"));
+
+  const copyTemplate = async () => {
+    try {
+      const { updated } = await quizApi.copy(quizId);
+
+      setEditQuizId(updated);
+      navigate("/edit");
+    } catch {
+      enqueueSnackbar("Ошибка создания квиза");
+    }
+  };
 
   return (
     <Box
+      onClick={copyTemplate}
       sx={{
+        cursor: "pointer",
         borderRadius: "12px",
         height: "280px",
-        width: "360px",
+        width: isTablet ? "360px" : "auto",
-        minWidth: "200px",
+        maxWidth: "360px",
+        minWidth: "280px",
         backgroundColor: "white",
         overflow: "hidden",
         boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
@@ -75,11 +97,7 @@ export default function QuizTemplateCard({ image }: Props) {
           />
         </Box>
       </Box>
-      <Box
+      <Box sx={{ p: "20px" }}>
-        sx={{
-          p: "20px",
-        }}
-      >
         <Typography sx={{ color: "#4D4D4D" }}>Название шаблона</Typography>
       </Box>
     </Box>

src/pages/createQuize/QuizGallery/Template.tsx

@@ -0,0 +1,51 @@
+import { Box, Typography, useTheme, useMediaQuery } from "@mui/material";
+import QuizTemplateCard from "./QuizTemplateCard";
+
+export type Template = {
+  picture: string;
+  quizId: number;
+};
+
+type TemplateProps = {
+  title: string;
+  items: Template[];
+};
+
+export const Template = ({ title, items }: TemplateProps) => {
+  const theme = useTheme();
+  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1100));
+  const isTablet = useMediaQuery(theme.breakpoints.down("md"));
+
+  return (
+    <>
+      <Box
+        sx={{ display: "flex", alignItems: "baseline", mt: "28px", mb: "40px" }}
+      >
+        <Typography variant="h5">{title}</Typography>
+        <Box
+          sx={{
+            flexGrow: 1,
+            width: "auto",
+            height: "10px",
+            borderBottom: "1px solid #9A9AAF",
+            mx: "5px",
+            mb: "0px",
+          }}
+        />
+        <Typography sx={{ color: "#4D4D4D" }}>({items.length})</Typography>
+      </Box>
+      <Box
+        sx={{
+          display: "grid",
+          gridTemplateColumns: isTablet ? "auto" : "1fr 1fr 1fr",
+          gap: isSmallMonitor ? "15px" : "40px",
+          justifyContent: isTablet ? "center" : "normal",
+        }}
+      >
+        {items.map(({ picture, quizId }) => (
+          <QuizTemplateCard key={picture} image={picture} quizId={quizId} />
+        ))}
+      </Box>
+    </>
+  );
+};

src/pages/createQuize/QuizGallery/index.tsx

@@ -0,0 +1,130 @@
+import { useState } from "react";
+import {
+  Box,
+  Button,
+  FormControl,
+  InputAdornment,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import ComplexNavText from "../ComplexNavText";
+import { TourismTemplate } from "./templates/Tourism";
+import { PoolsTemplate } from "./templates/Polls";
+
+import SearchIcon from "@icons/SearchIcon";
+import SectionWrapper from "@ui_kit/SectionWrapper";
+import ArrowDown from "@icons/ArrowDownIcon";
+
+const categories = [
+  "Категория 1",
+  "Категория 2",
+  "Категория 3",
+  "Категория 4",
+] as const;
+
+type Category = (typeof categories)[number];
+
+export default function QuizGallery() {
+  const theme = useTheme();
+  const [category, setCategory] = useState<Category | "">("");
+
+  return (
+    <SectionWrapper
+      maxWidth="lg"
+      sx={{ mt: "25px", mb: "74px", padding: "20px" }}
+    >
+      {/* <Header scrollDown={false} setMobileSidebar={() => {}} /> */}
+      <ComplexNavText text1="Галерея квизов" />
+      <Typography variant="h4" mt="20px" mb="40px">
+        Галерея квизов
+      </Typography>
+      <Box sx={{ width: "100%" }}>
+        <Box sx={{ display: "flex", gap: "2%" }}>
+          <FormControl fullWidth variant="standard" sx={{ width: "71%" }}>
+            <TextField
+              fullWidth
+              id="search"
+              placeholder="Поиск шаблонов"
+              sx={{
+                backgroundColor: theme.palette.background.default,
+                "& .MuiInputBase-root": {
+                  height: "45px",
+                  borderRadius: "10px",
+                  pl: "10px",
+                },
+              }}
+              InputProps={{
+                sx: {
+                  borderRadius: "10px",
+                  fontSize: "16px",
+                  lineHeight: "19px",
+                },
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <SearchIcon />
+                  </InputAdornment>
+                ),
+              }}
+            />
+          </FormControl>
+          <FormControl
+            fullWidth
+            size="small"
+            sx={{
+              width: "27%",
+              minWidth: "200px",
+              height: "45px",
+              "& .MuiInputLabel-outlined": { mt: "4px", ml: "-3px" },
+              "& .MuiInputLabel-outlined.MuiInputLabel-shrink": {
+                ml: "3px",
+                mt: "0px",
+              },
+            }}
+          >
+            <InputLabel
+              sx={{ color: "black", fontSize: "16px", lineHeight: "19px" }}
+              id="demo-simple-select-label"
+            >
+              Категории
+            </InputLabel>
+            <Select
+              labelId="demo-simple-select-label"
+              id="category-select"
+              label="Категории"
+              variant="outlined"
+              value={category}
+              onChange={(e) => setCategory(e.target.value as Category)}
+              sx={{
+                height: "45px",
+                borderRadius: "10px",
+              }}
+              inputProps={{ sx: { pt: "12px" } }}
+              IconComponent={(props) => <ArrowDown {...props} />}
+            >
+              {categories.map((cat) => (
+                <MenuItem key={cat} value={cat}>
+                  {cat}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Box>
+      </Box>
+      <TourismTemplate />
+      <PoolsTemplate />
+      <Box
+        sx={{ width: "100%", borderBottom: "1px solid #9A9AAF", mt: "50px" }}
+      />
+      <Typography mt="30px" variant="h4">
+        Нет подходящего шаблона?
+      </Typography>
+      <Button variant="contained" sx={{ px: "20px", mt: "30px" }}>
+        Создать квиз с нуля
+      </Button>
+    </SectionWrapper>
+  );
+}

src/pages/createQuize/QuizGallery/templates/Polls.tsx

@@ -0,0 +1,18 @@
+import { Template } from "../Template";
+
+import quizTemplateImage4 from "@/assets/quiz-templates/quiz-template-4.png";
+import quizTemplateImage5 from "@/assets/quiz-templates/quiz-template-5.png";
+import quizTemplateImage6 from "@/assets/quiz-templates/quiz-template-6.png";
+
+export const PoolsTemplate = () => {
+  return (
+    <Template
+      title="Исследования и опросы"
+      items={[
+        { quizId: 0, picture: quizTemplateImage4 },
+        { quizId: 0, picture: quizTemplateImage5 },
+        { quizId: 0, picture: quizTemplateImage6 },
+      ]}
+    />
+  );
+};

src/pages/createQuize/QuizGallery/templates/Tourism.tsx

@@ -0,0 +1,18 @@
+import { Template } from "../Template";
+
+import quizTemplateImage1 from "@/assets/quiz-templates/quiz-template-1.png";
+import quizTemplateImage2 from "@/assets/quiz-templates/quiz-template-2.png";
+import quizTemplateImage3 from "@/assets/quiz-templates/quiz-template-3.png";
+
+export const TourismTemplate = () => {
+  return (
+    <Template
+      title="Квизы"
+      items={[
+        { quizId: 0, picture: quizTemplateImage1 },
+        { quizId: 0, picture: quizTemplateImage2 },
+        { quizId: 0, picture: quizTemplateImage3 },
+      ]}
+    />
+  );
+};

tsconfig.extend.json

@@ -1,25 +1,14 @@
 {
-    "compilerOptions": {
+  "compilerOptions": {
-        "baseUrl": "./src",
+    "baseUrl": "./src",
-        "paths": {
+    "paths": {
-            "@ui_kit/*": [
+      "@/*": ["./*"],
-                "./ui_kit/*"
+      "@ui_kit/*": ["./ui_kit/*"],
-            ],
+      "@icons/*": ["./assets/icons/*"],
-            "@icons/*": [
+      "@root/*": ["./stores/*"],
-                "./assets/icons/*"
+      "@api/*": ["./api/*"],
-            ],
+      "@model/*": ["./model/*"],
-            "@root/*": [
+      "@utils/*": ["./utils/*"]
-                "./stores/*"
-            ],
-            "@api/*": [
-                "./api/*"
-            ],
-            "@model/*": [
-                "./model/*"
-            ],
-            "@utils/*": [
-                "./utils/*"
-            ]
-        }
     }
+  }
 }

yarn.lock

@@ -1121,6 +1121,14 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
+"@babel/runtime-corejs3@^7.24.4":
+  version "7.24.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.24.5.tgz#d2a5f46a088caf8f3899ad095054f83b0a686194"
+  integrity sha512-GWO0mgzNMLWaSYM4z4NVIuY0Cd1fl8cPnuetuddu5w/qGuvt5Y7oUi/kvvQGK9xgOkFJDQX2heIvTRn/OQ1XTg==
+  dependencies:
+    core-js-pure "^3.30.2"
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.24.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.4.tgz#de795accd698007a66ba44add6cc86542aff1edd"
@@ -1519,16 +1527,19 @@
     immer "^10.0.2"
     reconnecting-eventsource "^1.6.2"
 
-"@frontend/squzanswerer@^1.0.37":
+"@frontend/squzanswerer@^1.0.38":
-  version "1.0.37"
+  version "1.0.38"
-  resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/43/packages/npm/@frontend/squzanswerer/-/@frontend/squzanswerer-1.0.37.tgz#76d6b90488b3d42e83bd37c9c8e0dc6ccd47e76f"
+  resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/43/packages/npm/@frontend/squzanswerer/-/@frontend/squzanswerer-1.0.38.tgz#51f382368d73f9ad36c4f7f3357dedb32d5453e8"
-  integrity sha1-dta5BIiz1C6DvTfJyODcbM1H528=
+  integrity sha1-UfOCNo1z+a02xPfzNX3tsy1UU+g=
   dependencies:
     bowser "1.9.4"
     country-flag-emoji-polyfill "^0.1.8"
     current-device "^0.10.2"
     hex-rgb "^5.0.0"
     mobile-detect "^1.4.5"
+    mui-tel-input "^5.1.2"
+    react-imask "^7.6.0"
+    react-phone-number-input "^3.4.1"
 
 "@humanwhocodes/config-array@^0.11.14":
   version "0.11.14"
@@ -2589,6 +2600,13 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.96.tgz#eb0012d23ff53d14d64ec8a352bf89792de6aade"
   integrity sha512-84iSqGXoO+Ha16j8pRZ/L90vDMKX04QTYMTfYeE1WrjWaZXuchBehGUZEpNgx7JnmlrIHdnABmpjrQjhCnNldQ==
 
+"@types/node@^20.11.17":
+  version "20.12.10"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.12.10.tgz#8f0c3f12b0f075eee1fe20c1afb417e9765bef76"
+  integrity sha512-Eem5pH9pmWBHoGAT8Dr5fdc5rYA+4NAovdM4EktRPVAAiJhmWWfQrA0cFhAbOsQdSfIHjAud6YdkbL69+zSKjw==
+  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"
@@ -3908,7 +3926,7 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz#6c370ab19f8a3394e318fe682686ec0ac684d107"
   integrity sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==
 
-classnames@^2.2.5:
+classnames@^2.2.5, 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==
@@ -4176,7 +4194,7 @@ core-js-compat@^3.31.0, core-js-compat@^3.36.1:
   dependencies:
     browserslist "^4.23.0"
 
-core-js-pure@^3.23.3:
+core-js-pure@^3.23.3, core-js-pure@^3.30.2:
   version "3.37.0"
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.37.0.tgz#ce99fb4a7cec023fdbbe5b5bd1f06bbcba83316e"
   integrity sha512-d3BrpyFr5eD4KcbRvQ3FTUx/KWmaDesr7+a3+1+P46IUnNoEt+oiLijPINZMEon7w9oGkIINWxrBAU9DEciwFQ==
@@ -4231,6 +4249,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==
+
 craco-alias@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/craco-alias/-/craco-alias-3.0.1.tgz#45e5cb338b222a7f62d17e398b54aff7cf1572af"
@@ -6509,6 +6532,13 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
   integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
 
+imask@^7.6.0:
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/imask/-/imask-7.6.0.tgz#ed071748cfdf6b12ac153f69878e08c4333df984"
+  integrity sha512-6EHsq1q7v5+M4Vas2MGrs2oRpxPRWPwPDiL0HmG1ikBI/0hOwvkxRhVRFQnWIlZcTG7R8iw0az5V+z868qnQ9A==
+  dependencies:
+    "@babel/runtime-corejs3" "^7.24.4"
+
 immediate@~3.0.5:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
@@ -6578,6 +6608,13 @@ ini@^1.3.5:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
+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"
+
 internal-slot@^1.0.4, internal-slot@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802"
@@ -7777,6 +7814,11 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+libphonenumber-js@^1.10.55, libphonenumber-js@^1.10.61:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.11.1.tgz#2596683e1876bfee74082bb49339fe0a85ae34f9"
+  integrity sha512-Wze1LPwcnzvcKGcRHFGFECTaLzxOtujwpf924difr5zniyYv1C2PiW0419qDR7m8lKDxsImu5mwxFuXhXpjmvw==
+
 lie@~3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
@@ -8190,6 +8232,14 @@ ms@2.1.3, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+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"
+
 multicast-dns@^7.2.5:
   version "7.2.5"
   resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-7.2.5.tgz#77eb46057f4d7adbd16d9290fa7299f6fa64cced"
@@ -9588,6 +9638,14 @@ react-image-file-resizer@^0.4.8:
   resolved "https://registry.yarnpkg.com/react-image-file-resizer/-/react-image-file-resizer-0.4.8.tgz#85f4ae4469fd2867d961568af660ef403d7a79af"
   integrity sha512-Ue7CfKnSlsfJ//SKzxNMz8avDgDSpWQDOnTKOp/GNRFJv4dO9L5YGHNEnj40peWkXXAK2OK0eRIoXhOYpUzUTQ==
 
+react-imask@^7.6.0:
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/react-imask/-/react-imask-7.6.0.tgz#5948fc39e1d7d036292d4fade43df4636d43e7b7"
+  integrity sha512-SilPct67Xw4TN+dqn3SM4BVpy+FwNSeT0wblA/DXQ3El2KPBEWwrn4x3gQ39ZohFAphp7yG7w6gSKq5SeR/6Kg==
+  dependencies:
+    imask "^7.6.0"
+    prop-types "^15.8.1"
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -9608,6 +9666,17 @@ react-lazily@^0.9.2:
   resolved "https://registry.yarnpkg.com/react-lazily/-/react-lazily-0.9.2.tgz#74596dbde43c8e0f607445da5c4839cf6cc48ab5"
   integrity sha512-oBVRDQ+SuMPWenBO/0Kq+iZk34lOYJEmjiTto4bYRufndf8pux3E50BT3mJZbsq0vBsAVbX3fpQjlUvsXgDVag==
 
+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-redux@^7.2.0:
   version "7.2.9"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"