locales/ru.json

@@ -43,5 +43,11 @@
   "dry-wash.landing.hero-section.headline": "Оживите свою поездку с помощью экологически чистого ухода!",
   "dry-wash.landing.make-order-button": "Сделать заказ",
   "dry-wash.landing.site-logo": "Логотип компании \u00ABDry Master\u00BB",
-  "dry-wash.landing.social-proof-section.heading": "Нас выбирают"
-}
+  "dry-wash.landing.social-proof-section.heading": "Нас выбирают",
+  "dry-wash.notFound.title": "Страница не найдена",
+  "dry-wash.notFound.description": "К сожалению, запрашиваемая вами страница не существует.",
+  "dry-wash.notFound.button.back": " Вернуться на главную",
+  "dry-wash.errorBoundary.title":"Что-то пошло не так",
+  "dry-wash.errorBoundary.description": " Мы уже работаем над исправлением проблемы",
+  "dry-wash.errorBoundary.button.reload": "Перезагрузить страницу"
+}

package-lock.json

@@ -15,6 +15,7 @@
                 "@emotion/react": "^11.4.1",
                 "@emotion/styled": "^11.3.0",
                 "@fontsource/open-sans": "^5.1.0",
+                "@lottiefiles/react-lottie-player": "^3.5.4",
                 "@types/react": "^18.3.12",
                 "express": "^4.21.1",
                 "framer-motion": "^6.2.8",
@@ -3449,6 +3450,17 @@
                 "tslib": "2"
             }
         },
+        "node_modules/@lottiefiles/react-lottie-player": {
+            "version": "3.5.4",
+            "resolved": "https://registry.npmjs.org/@lottiefiles/react-lottie-player/-/react-lottie-player-3.5.4.tgz",
+            "integrity": "sha512-2FptWtHQ+o7MzdsMKSvNZ1Mz7xtKSYI0WL9HjZ1r+CvsXR3lbLQUDp7Pwx6qhg0Akm4VluQ+8/D1S1fcr1Ao4w==",
+            "dependencies": {
+                "lottie-web": "^5.12.2"
+            },
+            "peerDependencies": {
+                "react": "16 - 18"
+            }
+        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -7808,6 +7820,11 @@
                 "loose-envify": "cli.js"
             }
         },
+        "node_modules/lottie-web": {
+            "version": "5.12.2",
+            "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
+            "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg=="
+        },
         "node_modules/lru-cache": {
             "version": "10.4.3",
             "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",

package.json

@@ -23,6 +23,7 @@
         "@emotion/react": "^11.4.1",
         "@emotion/styled": "^11.3.0",
         "@fontsource/open-sans": "^5.1.0",
+        "@lottiefiles/react-lottie-player": "^3.5.4",
         "@types/react": "^18.3.12",
         "express": "^4.21.1",
         "framer-motion": "^6.2.8",

src/app.tsx

@@ -2,13 +2,16 @@ import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import Routers from './routes';
 import { ChakraProvider, theme as chakraTheme } from '@chakra-ui/react';
+import ErrorBoundary from './components/ErrorBoundary';
 
 const App = () => {
   return (
     <ChakraProvider theme={chakraTheme}>
-      <BrowserRouter>
-        <Routers></Routers>
-      </BrowserRouter>
+      <ErrorBoundary>
+        <BrowserRouter>
+          <Routers />
+        </BrowserRouter>
+      </ErrorBoundary>
     </ChakraProvider>
   );
 };

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,64 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { Heading, Text, Button, Center, VStack } from '@chakra-ui/react';
+import i18next from 'i18next';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(): Partial<ErrorBoundaryState> {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    console.error('Error caught by ErrorBoundary:', error, errorInfo);
+    this.setState({ error, errorInfo });
+  }
+
+  render() {
+    const { hasError } = this.state;
+    //TODO: добавить анимацию после залива 404 страницы
+    if (hasError) {
+      return (
+        <Center minH='100vh'>
+          <VStack spacing={4} textAlign='center'>
+            <Heading as='h1' size='2xl'>
+              {i18next.t('dry-wash.errorBoundary.title')}
+            </Heading>
+            <Text fontSize='lg'>
+              {i18next.t('dry-wash.errorBoundary.description')}
+            </Text>
+            <Button
+              colorScheme='teal'
+              size='lg'
+              variant='outline'
+              onClick={() => window.location.reload()}
+            >
+              {i18next.t('dry-wash.errorBoundary.button.reload')}
+            </Button>
+          </VStack>
+        </Center>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/components/ErrorBoundary/index.ts

@@ -0,0 +1 @@
+export { default } from './ErrorBoundary';

src/components/LayoutArm/LayoutArm.tsx

@@ -3,13 +3,19 @@ import Sidebar from '../Sidebar';
 import Orders from '../Orders';
 import Masters from '../Masters';
 import React from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
 
-const LayoutArm = ({ currentPage, onSelectPage }) => (
+const LayoutArm = () => (
   <Flex h='100vh'>
-    <Sidebar onSelectPage={onSelectPage} />
+    <Sidebar />
     <Box flex='1' bg='gray.50'>
-      {currentPage === 'orders' && <Orders />}
-      {currentPage === 'masters' && <Masters />}
+      <Routes>
+        <Route>
+          <Route index element={<Navigate to='orders' replace />} />
+          <Route path='orders' element={<Orders />} />
+          <Route path='masters' element={<Masters />} />
+        </Route>
+      </Routes>
     </Box>
   </Flex>
 );

src/components/Sidebar/Sidebar.tsx

@@ -2,7 +2,9 @@ import { Box, Button, Heading, VStack } from '@chakra-ui/react';
 import React from 'react';
 import { Divider } from '@chakra-ui/react';
 import i18next from 'i18next';
-const Sidebar = ({ onSelectPage }) => (
+import { Link } from 'react-router-dom';
+
+const Sidebar = () => (
   <Box
     borderRight='1px solid black'
     bg='gray.50'
@@ -18,7 +20,8 @@ const Sidebar = ({ onSelectPage }) => (
     <VStack align='start' spacing='4'>
       <Divider />
       <Button
-        onClick={() => onSelectPage('orders')}
+        as={Link}
+        to='orders'
         w='100%'
         colorScheme='green'
         variant='ghost'
@@ -27,7 +30,8 @@ const Sidebar = ({ onSelectPage }) => (
       </Button>
       <Divider />
       <Button
-        onClick={() => onSelectPage('masters')}
+        as={Link}
+        to='masters'
         w='100%'
         colorScheme='green'
         variant='ghost'

src/pages/arm/index.tsx

@@ -2,9 +2,7 @@ import React, { useState } from 'react';
 import LayoutArm from '../../components/LayoutArm';
 
 const Page = () => {
-  const [currentPage, setCurrentPage] = useState('orders');
-
-  return <LayoutArm currentPage={currentPage} onSelectPage={setCurrentPage} />;
+  return <LayoutArm />;
 };
 
 export default Page;

src/pages/notFound/notFound.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Text, Button, Center, VStack, Heading } from '@chakra-ui/react';
+import { Link } from 'react-router-dom';
+import { Player } from '@lottiefiles/react-lottie-player';
+import animate from '../../assets/animation/notFound.json';
+import i18next from 'i18next';
+
+const NotFound = () => {
+  return (
+    <Center minH='100vh'>
+      <VStack spacing={4} textAlign='center'>
+        <Player
+          autoplay
+          loop
+          src={animate}
+          style={{
+            height: '100%',
+            width: '100%',
+            maxHeight: '450px',
+            maxWidth: '450px',
+          }}
+        />
+        <Heading fontSize='xl'>
+          {i18next.t(`dry-wash.arm.notFound.title`)}
+        </Heading>
+        <Text fontSize='lg'>
+          {i18next.t(`dry-wash.arm.notFound.description`)}
+        </Text>
+        <Button
+          as={Link}
+          to='/dry-wash'
+          colorScheme='teal'
+          size='lg'
+          variant='outline'
+        >
+          {i18next.t(`dry-wash.arm.notFound.button.back`)}
+        </Button>
+      </VStack>
+    </Center>
+  );
+};
+
+export default NotFound;

src/routes.tsx

@@ -3,6 +3,7 @@ import { Routes, Route } from 'react-router-dom';
 import { PageSpinner } from './components';
 import Arm from './pages/arm';
 import { URLs } from './__data__/urls';
+import NotFound from './pages/notFound/notFound';
 
 const Landing = lazy(() => import('./pages/landing'));
 const OrderForm = lazy(() => import('./pages/order-form'));
@@ -15,7 +16,8 @@ const Routers = () => {
         <Route path={URLs.landing.url} element={<Landing />} />
         <Route path={URLs.orderForm.url} element={<OrderForm />} />
         <Route path={URLs.orderView.url} element={<OrderView />} />
-        <Route path='/dry-wash/arm' element={<Arm />}></Route>
+        <Route path='/dry-wash/arm/*' element={<Arm />}></Route>
+        <Route path='*' element={<NotFound />} />
       </Routes>
     </Suspense>
   );