Merge branch 'feat/landing' of ssh://85.143.175.152:222/dry_wash_inc/dry-wash-pl into feat/landing

locales/ru.json

@@ -28,11 +28,6 @@
   "dry-wash.arm.master.drawer.button.cancel": "Отменить",
   "dry-wash.arm.master.sideBar.title": " Сухой мастер",
   "dry-wash.arm.master.sideBar.title.master": "Мастера",
-  "dry-wash.arm.master.sideBar.title.orders": "Заказы",
+  "dry-wash.arm.master.sideBar.title.orders": "Заказы"
-  "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

@@ -9,13 +9,12 @@
             "version": "0.0.0",
             "license": "ISC",
             "dependencies": {
-                "@brojs/cli": "^1.6.1",
+                "@brojs/cli": "^1.6.2",
                 "@chakra-ui/icons": "^2.2.4",
                 "@chakra-ui/react": "^2.4.2",
                 "@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",
@@ -1565,9 +1564,10 @@
             }
         },
         "node_modules/@brojs/cli": {
-            "version": "1.6.1",
+            "version": "1.6.2",
-            "resolved": "https://git.bro-js.ru/api/packages/bro-js/npm/%40brojs%2Fcli/-/1.6.1/cli-1.6.1.tgz",
+            "resolved": "https://git.bro-js.ru/api/packages/bro-js/npm/%40brojs%2Fcli/-/1.6.2/cli-1.6.2.tgz",
-            "integrity": "sha512-jcRv68xUxQKYdVOH+eFcuV2DquOU1qHqduozghho02aGNUN8/oB2RL5WQ8ssi4wPJ+HpwRpmpqcqQAnnb9F7Cg==",
+            "integrity": "sha512-IDGX5SMt1VQxW2TfY6onazeSjQgUaRut4rwRZVWgBfzHrdp7cHgobciQkF65baT8SfAeaM3w/XHaQr8X1VKGEg==",
+            "license": "ISC",
             "dependencies": {
                 "@brojs/dev-server": "^1.6.1",
                 "@brojs/fire.app": "^1.6.1",
@@ -3448,17 +3448,6 @@
                 "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",
@@ -7818,11 +7807,6 @@
                 "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

@@ -17,13 +17,12 @@
     "author": "",
     "license": "ISC",
     "dependencies": {
-        "@brojs/cli": "^1.6.1",
+        "@brojs/cli": "^1.6.2",
         "@chakra-ui/icons": "^2.2.4",
         "@chakra-ui/react": "^2.4.2",
         "@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/__data__/urls.ts

@@ -0,0 +1,24 @@
+import { generatePath } from "react-router-dom";
+import { getNavigationValue } from "@brojs/cli";
+import { Order } from "../models";
+
+export const URLs = {
+  landing: {
+    url: getNavigationValue("dry-wash.main"),
+    getUrl() {
+      return this.url;
+    }
+  },
+  orderForm: {
+    url: getNavigationValue("dry-wash.create"),
+    getUrl() {
+      return this.url;
+    }
+  },
+  orderView: {
+    url: getNavigationValue("dry-wash.view.order"),
+    getUrl(orderId: Order.Id) {
+      return generatePath(this.url, { orderId });
+    }
+  }
+};

src/app.tsx

@@ -2,16 +2,13 @@ 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}>
-      <ErrorBoundary>
       <BrowserRouter>
-          <Routers />
+        <Routers></Routers>
       </BrowserRouter>
-      </ErrorBoundary>
     </ChakraProvider>
   );
 };

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,64 +0,0 @@
-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

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

src/components/LayoutArm/LayoutArm.tsx

@@ -3,19 +3,13 @@ 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 = () => (
+const LayoutArm = ({ currentPage, onSelectPage }) => (
   <Flex h='100vh'>
-    <Sidebar />
+    <Sidebar onSelectPage={onSelectPage} />
     <Box flex='1' bg='gray.50'>
-      <Routes>
+      {currentPage === 'orders' && <Orders />}
-        <Route>
+      {currentPage === 'masters' && <Masters />}
-          <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,9 +2,7 @@ import { Box, Button, Heading, VStack } from '@chakra-ui/react';
 import React from 'react';
 import { Divider } from '@chakra-ui/react';
 import i18next from 'i18next';
-import { Link } from 'react-router-dom';
+const Sidebar = ({ onSelectPage }) => (
-
-const Sidebar = () => (
   <Box
     borderRight='1px solid black'
     bg='gray.50'
@@ -20,8 +18,7 @@ const Sidebar = () => (
     <VStack align='start' spacing='4'>
       <Divider />
       <Button
-        as={Link}
+        onClick={() => onSelectPage('orders')}
-        to='orders'
         w='100%'
         colorScheme='green'
         variant='ghost'
@@ -30,8 +27,7 @@ const Sidebar = () => (
       </Button>
       <Divider />
       <Button
-        as={Link}
+        onClick={() => onSelectPage('masters')}
-        to='masters'
         w='100%'
         colorScheme='green'
         variant='ghost'

src/components/landing/CtaButton/CtaButton.tsx

@@ -1,10 +1,11 @@
 import React, { FC } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { ButtonProps, Button } from '@chakra-ui/react';
+import { URLs } from '../../../__data__/urls';
 
 export const CtaButton: FC<ButtonProps> = (props) => {
   return (
-    <Button as={RouterLink} to='/dry-wash/order-form' colorScheme='primary' {...props}>
+    <Button as={RouterLink} to={URLs.orderForm.getUrl()} colorScheme='primary' {...props}>
       Сделать заказ
     </Button>
   );

src/mocks/landing/index.ts

@@ -1,3 +1,5 @@
+import { Order } from "../../models";
+
 type ReviewItem = {
   id: string;
   firstname: string;
@@ -32,3 +34,9 @@ export const mockReviews: ReviewItem[] = [
     text: "К сожалению, мой опыт с сухой мойкой автомобилей оказался неудачным. Ожидала увидеть чистую машину после процедуры, но многие участки остались незаделанными. Кроме того, процедура заняла больше времени, чем мне обещали. Возможно, в этом конкретном центре что-то пошло не так, но я бы не стала повторно обращаться за этой услугой."
   },
 ].map((data, i) => ({ id: `review${i}`, ...data }));
+
+export const mockOrders: Order.View[] = [
+  { id: 'id1' },
+  { id: 'id2' },
+  { id: 'id3' },
+];

src/models/index.ts

@@ -0,0 +1 @@
+export * as Order from './order';

src/models/order.ts

@@ -0,0 +1,5 @@
+export type Id = string;
+
+export type View = {
+  id: Id;
+};

src/pages/arm/index.tsx

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

src/pages/landing/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Box, Container, VStack } from '@chakra-ui/react';
+import { Container, VStack } from '@chakra-ui/react';
 import {
   BenefitsSection,
   Footer,
@@ -19,14 +19,12 @@ const Page: FC = () => {
         bg='white'
         centerContent
       >
-        <VStack w='full' h='full' alignItems='stretch'>
+        <VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
           <HeroSection flexShrink={0} />
-          <Box flexGrow={1}>
+          <VStack as='main' flexGrow={1}>
-            <VStack as='main'>
             <BenefitsSection />
             <SocialProofSection />
           </VStack>
-          </Box>
           <Footer />
         </VStack>
       </Container>

src/pages/notFound/notFound.tsx

@@ -1,43 +0,0 @@
-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/pages/order-form/index.tsx

@@ -1,7 +1,20 @@
-import React from "react";
+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { Button } from '@chakra-ui/react';
+import { URLs } from '../../__data__/urls';
+import { mockOrders } from '../../mocks/landing';
 
 const Page = () => {
-  return <h1>Order form </h1>;
+  return (
+    <>
+      <h1>Order form</h1>
+      {mockOrders.map(({ id }) => (
+        <Button key={id} as={RouterLink} to={URLs.orderView.getUrl(id)}>
+          Посмотреть заказ {id}
+        </Button>
+      ))}
+    </>
+  );
 };
 
 export default Page;

src/routes.tsx

@@ -2,7 +2,7 @@ import React, { lazy, Suspense } from 'react';
 import { Routes, Route } from 'react-router-dom';
 import { PageSpinner } from './components';
 import Arm from './pages/arm';
-import NotFound from './pages/notFound/notFound';
+import { URLs } from './__data__/urls';
 
 const Landing = lazy(() => import('./pages/landing'));
 const OrderForm = lazy(() => import('./pages/order-form'));
@@ -12,13 +12,10 @@ const Routers = () => {
   return (
     <Suspense fallback={<PageSpinner />}>
       <Routes>
-        <Route path='/dry-wash'>
+        <Route path={URLs.landing.url} element={<Landing />} />
-          <Route index element={<Landing />} />
+        <Route path={URLs.orderForm.url} element={<OrderForm />} />
-          <Route path='order-form' element={<OrderForm />} />
+        <Route path={URLs.orderView.url} element={<OrderView />} />
-          <Route path='order-view' element={<OrderView />} />
+        <Route path='/dry-wash/arm' element={<Arm />}></Route>
-        </Route>
-        <Route path='/dry-wash/arm/*' element={<Arm />}></Route>
-        <Route path='*' element={<NotFound />} />
       </Routes>
     </Suspense>
   );