feat: separation of imports (#25)

Reviewed-on: #39
Reviewed-by: Primakov Alexandr Alexandrovich <primakovpro@gmail.com>

bro.config.js

@@ -1,9 +1,9 @@
 /* eslint-disable no-undef */
 /* eslint-disable @typescript-eslint/no-require-imports */
-const pkg = require("./package");
+const pkg = require('./package');
 
 module.exports = {
-  apiPath: "stubs/api",
+  apiPath: 'stubs/api',
   webpackConfig: {
     output: {
       publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`,
@@ -11,17 +11,19 @@ module.exports = {
   },
   /* use https://admin.bro-js.ru/ to create config, navigations and features */
   navigations: {
-    "dry-wash.main": "/dry-wash",
-    "dry-wash.create": "/order",
-    "dry-wash.view.order": "/order/:orderId",
-    "dry-wash.arm": "/arm",
+    'dry-wash.main': '/dry-wash',
+    'dry-wash.create': '/order',
+    'dry-wash.view.order': '/order/:orderId',
+    'dry-wash.arm.master': '/master',
+    'dry-wash.arm.order': '/order',
+    'dry-wash.arm': '/arm/*',
   },
   features: {
-    "dry-wash-pl": {
+    'dry-wash-pl': {
       // add your features here in the format [featureName]: { value: string }
     },
   },
   config: {
-    "dry-wash-pl.api": "/api",
+    'dry-wash-pl.api': '/api',
   },
 };

eslint.config.mjs

@@ -3,6 +3,7 @@ import pluginJs from "@eslint/js";
 import tseslint from "typescript-eslint";
 import pluginReact from "eslint-plugin-react";
 import stylistic from '@stylistic/eslint-plugin';
+import pluginImport from 'eslint-plugin-import';
 
 export default [
   { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
@@ -12,7 +13,8 @@ export default [
   pluginReact.configs.flat.recommended,
   {
     plugins: {
-      '@stylistic': stylistic
+      '@stylistic': stylistic,
+      'import': pluginImport,
     },
     "rules": {
       "no-unused-vars": "off",
@@ -24,13 +26,20 @@ export default [
           "caughtErrorsIgnorePattern": "^_"
         }
       ],
-      "sort-imports": ["error", {
-        "ignoreCase": false,
-        "ignoreDeclarationSort": true,
-        "ignoreMemberSort": true,
-        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
-        "allowSeparatedGroups": true
-      }],
+      "sort-imports": ["off"],
+      "import/order": [
+        "error",
+        {
+          "groups": [
+            "builtin",
+            "external",
+            "internal",
+            "parent",
+            ["sibling", "index"]
+          ],
+          "newlines-between": "always",
+        }
+      ],
       semi: ["error", "always"],
       '@stylistic/indent': ['error', 2],
       'react/prop-types': 'off'

locales/en.json

@@ -0,0 +1,53 @@
+{
+  "dry-wash.landing.benefits-section.description": "Discover the benefits of our car dry cleaning services",
+  "dry-wash.landing.benefits-section.heading": "Advantages of an eco-friendly car wash",
+  "dry-wash.landing.benefits-section.list.0": "Environmentally friendly products",
+  "dry-wash.landing.benefits-section.list.1": "Fast and efficient service",
+  "dry-wash.landing.benefits-section.list.2": "Convenient mobile access",
+  "dry-wash.landing.benefits-section.list.3": "Reliable and trustworthy",
+  "dry-wash.landing.footer.copyright": "\u00A9 {{currentYear}} DryMaster. All rights reserved",
+  "dry-wash.landing.footer.links.faq": "FAQ",
+  "dry-wash.landing.footer.links.privacy-policy": "Privacy policy",
+  "dry-wash.landing.footer.links.service-terms": "Terms of service",
+  "dry-wash.landing.hero-section.description": "Experience the ultimate convenience of a dry car wash, designed for a cleaner planet.",
+  "dry-wash.landing.hero-section.headline": "Revitalize Your Ride with Eco-Friendly Care!",
+  "dry-wash.landing.make-order-button": "Make order",
+  "dry-wash.landing.site-logo": "The logo of the \"Dry Master\" company",
+  "dry-wash.landing.social-proof-section.heading": "We are being chosen",
+  "dry-wash.arm.master.add": "Add",
+  "dry-wash.arm.order.title": "Orders",
+  "dry-wash.arm.order.status.progress": "In Progress",
+  "dry-wash.arm.order.status.complete": "Completed",
+  "dry-wash.arm.order.status.pending": "Pending",
+  "dry-wash.arm.order.status.working": "Working",
+  "dry-wash.arm.order.status.canceled": "Canceled",
+  "dry-wash.arm.order.status.placeholder": "Select Status",
+  "dry-wash.arm.order.table.header.carNumber": "Car Number",
+  "dry-wash.arm.order.table.header.washingTime": "Washing Time",
+  "dry-wash.arm.order.table.header.orderDate": "Order Date",
+  "dry-wash.arm.order.table.header.status": "Status",
+  "dry-wash.arm.order.table.header.telephone": "Telephone",
+  "dry-wash.arm.order.table.header.location": "Location",
+  "dry-wash.arm.master.title": "Masters",
+  "dry-wash.arm.master.table.header.name": "Name",
+  "dry-wash.arm.master.table.header.currentJob": "Current Job",
+  "dry-wash.arm.master.table.header.phone": "Phone",
+  "dry-wash.arm.master.table.header.actions": "Actions",
+  "dry-wash.arm.master.table.actionsMenu.delete": "Delete Master",
+  "dry-wash.arm.master.drawer.title": "Add New Master",
+  "dry-wash.arm.master.drawer.inputName.label": "Full Name",
+  "dry-wash.arm.master.drawer.inputName.placeholder": "Enter Full Name",
+  "dry-wash.arm.master.drawer.inputPhone.label": "Phone Number",
+  "dry-wash.arm.master.drawer.inputPhone.placeholder": "Enter Phone Number",
+  "dry-wash.arm.master.drawer.button.save": "Save",
+  "dry-wash.arm.master.drawer.button.cancel": "Cancel",
+  "dry-wash.arm.master.sideBar.orders": "Orders",
+  "dry-wash.arm.master.sideBar.master": "Masters",
+  "dry-wash.arm.master.sideBar.title": "Dry Master",
+  "dry-wash.notFound.title": "Page Not Found",
+  "dry-wash.notFound.description": "Unfortunately, the page you are looking for does not exist.",
+  "dry-wash.notFound.button.back": "Back to Home",
+  "dry-wash.errorBoundary.title": "Something went wrong",
+  "dry-wash.errorBoundary.description": "We are already working on fixing the issue",
+  "dry-wash.errorBoundary.button.reload": "Reload Page"
+}

locales/ru.json

@@ -3,7 +3,7 @@
   "dry-wash.arm.order.title": "Заказы",
   "dry-wash.arm.order.status.progress": "Выполняется",
   "dry-wash.arm.order.status.complete": "Завершено",
-  "dry-wash.arm.order.status.pending": "в ожидании",
+  "dry-wash.arm.order.status.pending": "В ожидании",
   "dry-wash.arm.order.status.working": "В работе",
   "dry-wash.arm.order.status.canceled": "Отменено",
   "dry-wash.arm.order.status.placeholder": "Выберите статус",
@@ -26,13 +26,28 @@
   "dry-wash.arm.master.drawer.inputPhone.placeholder": "Введите номер телефона",
   "dry-wash.arm.master.drawer.button.save": "Сохранить",
   "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.orders": "Заказы",
+  "dry-wash.arm.master.sideBar.master": "Мастера",
+  "dry-wash.arm.master.sideBar.title": "Сухой мастер",
+  "dry-wash.landing.benefits-section.description": "Откройте для себя преимущества наших услуг по химчистке автомобилей",
+  "dry-wash.landing.benefits-section.heading": "Преимущества экологичной автомойки",
+  "dry-wash.landing.benefits-section.list.0": "Экологически безопасные продукты",
+  "dry-wash.landing.benefits-section.list.1": "Быстрое и эффективное обслуживание",
+  "dry-wash.landing.benefits-section.list.2": "Удобный мобильный доступ",
+  "dry-wash.landing.benefits-section.list.3": "Надежный и заслуживающий доверия",
+  "dry-wash.landing.footer.copyright": "\u00A9 {{currentYear}} DryMaster. Все права защищены",
+  "dry-wash.landing.footer.links.faq": "FAQ",
+  "dry-wash.landing.footer.links.privacy-policy": "Политика конфиденциальности",
+  "dry-wash.landing.footer.links.service-terms": "Условия обслуживания",
+  "dry-wash.landing.hero-section.description": "Ощутите максимальное удобство сухой мойки автомобилей, созданной для того, чтобы планета стала чище",
+  "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.notFound.title": "Страница не найдена",
   "dry-wash.notFound.description": "К сожалению, запрашиваемая вами страница не существует.",
-  "dry-wash.notFound.button.back": " Вернуться на главную",
+  "dry-wash.notFound.button.back": "Вернуться на главную",
   "dry-wash.errorBoundary.title":"Что-то пошло не так",
-  "dry-wash.errorBoundary.description": " Мы уже работаем над исправлением проблемы",
+  "dry-wash.errorBoundary.description": "Мы уже работаем над исправлением проблемы",
   "dry-wash.errorBoundary.button.reload": "Перезагрузить страницу"
 }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "dry-wash",
-    "version": "0.0.0",
+    "version": "0.1.0",
     "description": "<a id=\"readme-top\"></a>",
     "main": "./src/index.tsx",
     "scripts": {
@@ -17,7 +17,7 @@
     "author": "",
     "license": "ISC",
     "dependencies": {
-        "@brojs/cli": "^1.6.1",
+        "@brojs/cli": "^1.6.3",
         "@chakra-ui/icons": "^2.2.4",
         "@chakra-ui/react": "^2.4.2",
         "@emotion/react": "^11.4.1",
@@ -30,6 +30,7 @@
         "i18next": "^23.16.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-i18next": "^15.1.1",
         "react-icons": "^5.3.0",
         "react-router-dom": "^6.27.0"
     },
@@ -38,6 +39,7 @@
         "@stylistic/eslint-plugin": "^2.10.1",
         "@types/react-dom": "^18.3.1",
         "eslint": "^9.14.0",
+        "eslint-plugin-import": "^2.31.0",
         "eslint-plugin-react": "^7.37.2",
         "globals": "^15.11.0",
         "prettier": "3.3.3",

src/__data__/urls.ts

@@ -0,0 +1,40 @@
+import { generatePath } from 'react-router-dom';
+import { getNavigationValue } from '@brojs/cli';
+
+import { Order } from '../models';
+
+const getFullUrls = (url: string) =>
+  `${getNavigationValue('dry-wash.main')}${url}`;
+
+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 });
+    },
+  },
+  armMaster: {
+    url: getNavigationValue('dry-wash.arm.master'),
+    isOn: Boolean(getNavigationValue('dry-wash.arm.master')),
+  },
+  armOrder: {
+    url: getNavigationValue('dry-wash.arm.order'),
+    isOn: Boolean(getNavigationValue('dry-wash.arm.order')),
+  },
+  armBase: {
+    url: getFullUrls(getNavigationValue('dry-wash.arm')),
+    isOn: Boolean(getNavigationValue('dry-wash.arm')),
+  },
+};

src/app.tsx

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

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -34,15 +34,16 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
   render() {
     const { hasError } = this.state;
     //TODO: добавить анимацию после залива 404 страницы
+    //TODO: может сделать обертку для хука, чтоб язык менялся без перезагрузки
     if (hasError) {
       return (
         <Center minH='100vh'>
           <VStack spacing={4} textAlign='center'>
             <Heading as='h1' size='2xl'>
-              {i18next.t('dry-wash.errorBoundary.title')}
+              {i18next.t('~:dry-wash.errorBoundary.title')}
             </Heading>
             <Text fontSize='lg'>
-              {i18next.t('dry-wash.errorBoundary.description')}
+              {i18next.t('~:dry-wash.errorBoundary.description')}
             </Text>
             <Button
               colorScheme='teal'
@@ -50,7 +51,7 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
               variant='outline'
               onClick={() => window.location.reload()}
             >
-              {i18next.t('dry-wash.errorBoundary.button.reload')}
+              {i18next.t('~:dry-wash.errorBoundary.button.reload')}
             </Button>
           </VStack>
         </Center>

src/components/LayoutArm/LayoutArm.tsx

@@ -1,23 +1,37 @@
 import { Box, Flex } from '@chakra-ui/react';
-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 = () => (
+import Sidebar from '../Sidebar';
+import Orders from '../Orders';
+import Masters from '../Masters';
+import { URLs } from '../../__data__/urls';
+
+const LayoutArm = () => {
+  let defaultRedirect = null;
+
+  if (URLs.armOrder.isOn) {
+    defaultRedirect = URLs.armOrder.url;
+  } else if (URLs.armMaster.isOn) {
+    defaultRedirect = URLs.armMaster.url;
+  }
+
+  return (
     <Flex h='100vh'>
       <Sidebar />
       <Box flex='1' bg='gray.50'>
         <Routes>
-        <Route>
-          <Route index element={<Navigate to='orders' replace />} />
-          <Route path='orders' element={<Orders />} />
-          <Route path='masters' element={<Masters />} />
-        </Route>
+          <Route index element={<Navigate to={defaultRedirect} replace />} />
+          {URLs.armOrder.isOn && (
+            <Route path={URLs.armOrder.url} element={<Orders />} />
+          )}
+          {URLs.armMaster.isOn && (
+            <Route path={URLs.armMaster.url} element={<Masters />} />
+          )}
         </Routes>
       </Box>
     </Flex>
-);
+  );
+};
 
 export default LayoutArm;

src/components/MasterActionsMenu/MasterActionsMenu.tsx

@@ -7,16 +7,18 @@ import {
   IconButton,
 } from '@chakra-ui/react';
 import { EditIcon } from '@chakra-ui/icons';
-import i18next from 'i18next';
+import { useTranslation } from 'react-i18next';
 
 const MasterActionsMenu = () => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.arm.master.table.actionsMenu',
+  });
+
   return (
     <Menu>
       <MenuButton icon={<EditIcon />} as={IconButton} variant='outline' />
       <MenuList>
-        <MenuItem>
-          {i18next.t('dry-wash.arm.master.table.actionsMenu.delete')}
-        </MenuItem>
+        <MenuItem>{t('delete')}</MenuItem>
       </MenuList>
     </Menu>
   );

src/components/MasterDrawer/MasterDrawer.tsx

@@ -12,7 +12,7 @@ import {
   DrawerHeader,
   DrawerOverlay,
 } from '@chakra-ui/react';
-import i18next from 'i18next';
+import { useTranslation } from 'react-i18next';
 
 const MasterDrawer = ({ isOpen, onClose }) => {
   const [newMaster, setNewMaster] = useState({ name: '', phone: '' });
@@ -22,51 +22,44 @@ const MasterDrawer = ({ isOpen, onClose }) => {
     onClose();
   };
 
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.arm.master.drawer',
+  });
+
   return (
     <Drawer isOpen={isOpen} onClose={onClose} size='md'>
       <DrawerOverlay />
       <DrawerContent>
         <DrawerCloseButton />
-        <DrawerHeader>
-          {i18next.t('dry-wash.arm.master.drawer.title')}
-        </DrawerHeader>
+        <DrawerHeader>{t('title')}</DrawerHeader>
         <DrawerBody>
           <FormControl mb='4'>
-            <FormLabel>
-              {i18next.t('dry-wash.arm.master.drawer.inputName.label')}
-            </FormLabel>
+            <FormLabel>{t('inputName.label')}</FormLabel>
             <Input
               value={newMaster.name}
               onChange={(e) =>
                 setNewMaster({ ...newMaster, name: e.target.value })
               }
-              placeholder={i18next.t(
-                'dry-wash.arm.master.drawer.inputName.placeholder',
-              )}
+              placeholder={t('inputName.placeholder')}
             />
           </FormControl>
           <FormControl>
-            <FormLabel>
-              {' '}
-              {i18next.t('dry-wash.arm.master.drawer.inputPhone.label')}
-            </FormLabel>
+            <FormLabel> {t('inputPhone.label')}</FormLabel>
             <Input
               value={newMaster.phone}
               onChange={(e) =>
                 setNewMaster({ ...newMaster, phone: e.target.value })
               }
-              placeholder={i18next.t(
-                'dry-wash.arm.master.drawer.inputPhone.placeholder',
-              )}
+              placeholder={t('inputPhone.placeholder')}
             />
           </FormControl>
         </DrawerBody>
         <DrawerFooter>
           <Button colorScheme='teal' mr={3} onClick={handleSave}>
-            {i18next.t('dry-wash.arm.master.drawer.button.save')}
+            {t('button.save')}
           </Button>
           <Button variant='ghost' onClick={onClose}>
-            {i18next.t('dry-wash.arm.master.drawer.button.cancel')}
+            {t('button.cancel')}
           </Button>
         </DrawerFooter>
       </DrawerContent>

src/components/MasterItem/MasterItem.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Badge, Link, Stack, Td, Tr } from '@chakra-ui/react';
+
 import MasterActionsMenu from '../MasterActionsMenu';
 
 const MasterItem = ({ name, schedule, phone }) => {

src/components/Masters/Masters.tsx

@@ -11,31 +11,39 @@ import {
   useDisclosure,
   Flex,
 } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+
 import { mastersData } from '../../mocks';
 import MasterItem from '../MasterItem';
 import MasterDrawer from '../MasterDrawer';
-import i18next from 'i18next';
 
-const TABLE_HEADERS = ['name', 'currentJob', 'phone', 'actions'];
+const TABLE_HEADERS = [
+  'name' as const,
+  'currentJob' as const,
+  'phone' as const,
+  'actions' as const,
+];
 
 const Masters = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.arm.master',
+  });
+
   return (
     <Box p='8'>
       <Flex justifyContent='space-between' alignItems='center' mb='5'>
-        <Heading size='lg'> {i18next.t('dry-wash.arm.master.title')}</Heading>
+        <Heading size='lg'> {t('title')}</Heading>
         <Button colorScheme='green' onClick={onOpen}>
-          + {i18next.t('dry-wash.arm.master.add')}
+          + {t('add')}
         </Button>
       </Flex>
       <Table variant='simple' colorScheme='blackAlpha'>
         <Thead>
           <Tr>
             {TABLE_HEADERS.map((name) => (
-              <Th key={name}>
-                {i18next.t(`dry-wash.arm.master.table.header.${name}`)}
-              </Th>
+              <Th key={name}>{t(`table.header.${name}`)}</Th>
             ))}
           </Tr>
         </Thead>

src/components/OrderItem/OrderItem.tsx

@@ -1,8 +1,26 @@
 import React, { useState } from 'react';
 import { Td, Tr, Link, Select } from '@chakra-ui/react';
-import i18next from 'i18next';
+import { useTranslation } from 'react-i18next';
 
-const statuses = ['pending', 'progress', 'working', 'canceled', 'complete'];
+const statuses = [
+  'pending' as const,
+  'progress' as const,
+  'working' as const,
+  'canceled' as const,
+  'complete' as const,
+];
+
+type GetArrItemType<ArrType> =
+  ArrType extends Array<infer ItemType> ? ItemType : never;
+
+export type OrderProps = {
+  carNumber?: string;
+  washTime?: string;
+  orderDate?: string;
+  status?: GetArrItemType<typeof statuses>;
+  phone?: string;
+  location?: string;
+};
 
 const OrderItem = ({
   carNumber,
@@ -11,7 +29,11 @@ const OrderItem = ({
   status,
   phone,
   location,
-}) => {
+}: OrderProps) => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.arm.order',
+  });
+
   const [statusSelect, setStatus] = useState(status);
 
   return (
@@ -22,12 +44,12 @@ const OrderItem = ({
       <Td>
         <Select
           value={statusSelect}
-          onChange={(e) => setStatus(e.target.value)}
-          placeholder={i18next.t(`dry-wash.arm.order.status.placeholder`)}
+          onChange={(e) => setStatus(e.target.value as OrderProps['status'])}
+          placeholder={t(`status.placeholder`)}
         >
           {statuses.map((status) => (
             <option key={status} value={status}>
-              {i18next.t(`dry-wash.arm.order.status.${status}`)}
+              {t(`status.${status}`)}
             </option>
           ))}
         </Select>

src/components/Orders/Orders.tsx

@@ -1,35 +1,45 @@
-import { Box, Heading, Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
 import React from 'react';
+import { Box, Heading, Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+
 import { ordersData } from '../../mocks';
 import OrderItem from '../OrderItem';
-import i18next from 'i18next';
+import { OrderProps } from '../OrderItem/OrderItem';
+
 const Orders = () => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.arm.order',
+  });
+
   const TABLE_HEADERS = [
-    'carNumber',
-    'washingTime',
-    'orderDate',
-    'status',
-    'telephone',
-    'location',
+    'carNumber' as const,
+    'washingTime' as const,
+    'orderDate' as const,
+    'status' as const,
+    'telephone' as const,
+    'location' as const,
   ];
+
   return (
     <Box p='8'>
       <Heading size='lg' mb='5'>
-        {i18next.t('dry-wash.arm.order.title')}
+        {t('title')}
       </Heading>
       <Table variant='simple' colorScheme='blackAlpha'>
         <Thead>
           <Tr>
             {TABLE_HEADERS.map((name, key) => (
-              <Th key={key}>
-                {i18next.t(`dry-wash.arm.order.table.header.${name}`)}
-              </Th>
+              <Th key={key}>{t(`table.header.${name}`)}</Th>
             ))}
           </Tr>
         </Thead>
         <Tbody>
           {ordersData.map((order, index) => (
-            <OrderItem key={index} {...order} />
+            <OrderItem
+              key={index}
+              {...order}
+              status={order.status as OrderProps['status']}
+            />
           ))}
         </Tbody>
       </Table>

src/components/Sidebar/Sidebar.tsx

@@ -1,10 +1,16 @@
-import { Box, Button, Heading, VStack } from '@chakra-ui/react';
+import { Box, Button, Heading, VStack, Divider } from '@chakra-ui/react';
 import React from 'react';
-import { Divider } from '@chakra-ui/react';
-import i18next from 'i18next';
 import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 
-const Sidebar = () => (
+import { URLs } from '../../__data__/urls';
+
+const Sidebar = () => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.arm.master.sideBar',
+  });
+
+  return (
     <Box
       borderRight='1px solid black'
       bg='gray.50'
@@ -14,33 +20,38 @@ const Sidebar = () => (
       pt='8'
     >
       <Heading color='green' size='lg' mb='5'>
-      {i18next.t(`dry-wash.arm.master.sideBar.title`)}
+        {t('title')}
       </Heading>
 
       <VStack align='start' spacing='4'>
         <Divider />
+        {URLs.armOrder.isOn && (
           <Button
             as={Link}
-        to='orders'
+            to={URLs.armOrder.url}
             w='100%'
             colorScheme='green'
             variant='ghost'
           >
-        {i18next.t(`dry-wash.arm.master.sideBar.title.orders`)}
+            {t('orders')}
           </Button>
+        )}
         <Divider />
+        {URLs.armMaster.isOn && (
           <Button
             as={Link}
-        to='masters'
+            to={URLs.armMaster.url}
             w='100%'
             colorScheme='green'
             variant='ghost'
           >
-        {i18next.t(`dry-wash.arm.master.sideBar.title.master`)}
+            {t('master')}
           </Button>
+        )}
         <Divider />
       </VStack>
     </Box>
-);
+  );
+};
 
 export default Sidebar;

src/components/landing/BenefitsSection/BenefitsSection.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   MdEco,
   MdMiscellaneousServices,
@@ -6,37 +7,45 @@ import {
   MdHandshake,
 } from 'react-icons/md';
 import { Heading, HStack, List, Text, VStack } from '@chakra-ui/react';
+
 import { CtaButton, PageSection } from '../';
+
 import { ListItem } from './ListItem';
 
 export const BenefitsSection: FC = () => {
-  return (
-    <PageSection>
-      <VStack w='full' spacing={2}>
-        <Heading as='h2'>Преимущества экологичной автомойки</Heading>
-        <Text>
-          Откройте для себя преимущества наших услуг по химчистке автомобилей
-        </Text>
-      </VStack>
-      <List display='flex' flexDirection='column' spacing={3}>
-        {[
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.landing.benefits-section',
+  });
+
+  const listData = [
     {
       Icon: MdEco,
-            children: 'Экологически безопасные продукты',
+      children: t('list.0'),
     },
     {
       Icon: MdMiscellaneousServices,
-            children: 'Быстрое и эффективное обслуживание',
+      children: t('list.1'),
     },
     {
       Icon: MdPlace,
-            children: 'Удобный мобильный доступ',
+      children: t('list.2'),
     },
     {
       Icon: MdHandshake,
-            children: 'Надежный и заслуживающий доверия',
+      children: t('list.3'),
     },
-        ].map((props, i) => (
+  ];
+
+  return (
+    <PageSection>
+      <VStack w='full' spacing={2}>
+        <Heading as='h2'>{t('heading')}</Heading>
+        <Text>
+          {t('description')}
+        </Text>
+      </VStack>
+      <List display='flex' flexDirection='column' spacing={3}>
+        {listData.map((props, i) => (
           <ListItem key={i} {...props} />
         ))}
       </List>

src/components/landing/BenefitsSection/ListItem/ListItem.tsx

@@ -2,7 +2,7 @@ import React, { FC, PropsWithChildren } from 'react';
 import { ListIcon, ListItem as ChakraListItem } from '@chakra-ui/react';
 import { IconType } from 'react-icons';
 
-type ListItemProps = PropsWithChildren & {
+export type ListItemProps = PropsWithChildren & {
   Icon: IconType;
 };
 

src/components/landing/BenefitsSection/ListItem/index.ts

@@ -1 +1 @@
-export { ListItem } from './ListItem';
+export { type ListItemProps, ListItem } from './ListItem';

src/components/landing/CtaButton/CtaButton.tsx

@@ -1,11 +1,21 @@
 import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
 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) => {
+  const { t } = useTranslation();
+
   return (
-    <Button as={RouterLink} to='/dry-wash/order-form' colorScheme='primary' {...props}>
-      Сделать заказ
+    <Button
+      as={RouterLink}
+      to={URLs.orderForm.getUrl()}
+      colorScheme='primary'
+      {...props}
+    >
+      {t('~:dry-wash.landing.make-order-button')}
     </Button>
   );
 };

src/components/landing/Footer/Copyright/Copyright.tsx

@@ -1,8 +1,11 @@
 import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Text } from '@chakra-ui/react';
 
 const currentYear = new Date().getFullYear();
 
 export const Copyright: FC = () => {
-  return <Text color='whiteAlpha.500'>&copy; {currentYear} DryMaster. Все права защищены</Text>;
+  const { t } = useTranslation();
+
+  return <Text color='whiteAlpha.500'>{t('dry-wash.landing.footer.copyright', { currentYear })}</Text>;
 };

src/components/landing/Footer/Footer.tsx

@@ -1,20 +1,29 @@
 import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Link, List, ListItem } from '@chakra-ui/react';
 import { Link as RouterLink } from 'react-router-dom';
+
 import { SiteLogo, PageSection } from '../';
+
 import { Copyright } from './Copyright';
 
 export const Footer: FC = () => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.landing.footer.links',
+  });
+
+  const listData = [
+    { to: '#', label: t('privacy-policy') },
+    { to: '#', label: t('service-terms') },
+    { to: '#', label: t('faq')  },
+  ];
+
   return (
     <PageSection as='footer' py={5} bg='gray.700' color='white'>
       <SiteLogo />
       <Copyright />
       <List spacing={2}>
-        {[
-          { to: '#', label: 'Политика конфиденциальности' },
-          { to: '#', label: 'Условия обслуживания' },
-          { to: '#', label: 'FAQ' },
-        ].map(({ to, label }, i) => (
+        {listData.map(({ to, label }, i) => (
           <ListItem key={i}>
             <Link as={RouterLink} to={to}>
               {label}

src/components/landing/HeroSection/HeroSection.tsx

@@ -1,11 +1,17 @@
 import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Box, Heading, Text, Center, VStack, BoxProps } from '@chakra-ui/react';
+
 import { DemoVideoPosterImg } from '../../../assets/images';
 import { CtaButton, SiteLogo, PageSection } from '../';
 
 type HeroSectionProps = Pick<BoxProps, 'flexShrink'>;
 
 export const HeroSection: FC<HeroSectionProps> = ({ flexShrink }) => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.landing.hero-section',
+  });
+
   return (
     <Box flexShrink={flexShrink} as='header' pos='relative' zIndex={0}>
       <Box
@@ -41,15 +47,14 @@ export const HeroSection: FC<HeroSectionProps> = ({ flexShrink }) => {
             color='white'
             __css={{ textWrap: 'balance' }}
           >
-            Оживите свою поездку с помощью экологически чистого ухода!
+            {t('headline')}
           </Heading>
           <Text
             textAlign='center'
             __css={{ textWrap: 'balance' }}
             color='white'
           >
-            Ощутите максимальное удобство сухой мойки автомобилей, созданной для
-            того, чтобы планета стала чище
+            {t('description')}
           </Text>
         </VStack>
         <CtaButton size='lg' />

src/components/landing/SiteLogo/SiteLogo.tsx

@@ -1,10 +1,13 @@
 import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Image } from '@chakra-ui/react';
+
 import { LogoSvg } from '../../../assets/icons';
 
 export const SiteLogo: FC = () => {
-  return <Image src={LogoSvg} alt='Логотип компании "Сухой мастер"' w={40} />;
+  const { t } = useTranslation();
+
+  return <Image src={LogoSvg} alt={t('~:dry-wash.landing.site-logo')} w={40} />;
 };
 
-// todo: add i18n for alt
 // todo: replace Image by SVG React component

src/components/landing/SocialProofSection/ReviewsSlider/ReviewsSlider.tsx

@@ -1,4 +1,5 @@
 import React, { FC, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   Tab,
   TabList,
@@ -7,13 +8,19 @@ import {
   Tabs,
   Text,
 } from '@chakra-ui/react';
-import { mockReviews } from '../../../../mocks/landing';
+
+import { mockReview } from '../../../../mocks/landing';
+import { Review } from '../../../../models';
+
 import { ReviewCard } from './ReviewCard';
 
-const reviewsCount = mockReviews.length;
 const SLIDE_CHANGE_INTERVAL = 5000;
 
 export const ReviewsSlider: FC = () => {
+  const { i18n } = useTranslation();
+  const mockReviews: Review.View[] = mockReview.getReviewsByLocale(i18n.language);
+  const reviewsCount = mockReviews.length;
+
   const [activeTab, setActiveTab] = useState(0);
   const [isSlideShowStopped, setIsSlideShowStopped] = useState(false);
 

src/components/landing/SocialProofSection/SocialProofSection.tsx

@@ -1,15 +1,19 @@
 import React, { FC } from 'react';
-import {
-  Heading,
-  HStack,
-} from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+import { Heading, HStack } from '@chakra-ui/react';
+
 import { CtaButton, PageSection } from '../';
+
 import { ReviewsSlider } from './ReviewsSlider';
 
 export const SocialProofSection: FC = () => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.landing.social-proof-section',
+  });
+
   return (
     <PageSection>
-      <Heading as='h2'>Нас выбирают</Heading>
+      <Heading as='h2'>{t('heading')}</Heading>
       <ReviewsSlider />
       <HStack w='full' justify='flex-end'>
         <CtaButton />

src/containers/LandingThemeProvider/LandingThemeProvider.tsx

@@ -1,5 +1,6 @@
 import React, { FC, PropsWithChildren } from 'react';
 import { ChakraProvider } from '@chakra-ui/react';
+
 import { default as landingTheme } from './theme-config';
 import Fonts from './Fonts';
 

src/index.tsx

@@ -2,9 +2,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { i18nextReactInitConfig } from '@brojs/cli';
-import App from './app';
 import i18next from 'i18next';
 
+import App from './app';
+
 i18next.t = i18next.t.bind(i18next);
 const i18nextPromise = i18nextReactInitConfig(i18next);
 export default () => <App />;

src/mocks/landing/index.ts

@@ -1,34 +1,2 @@
-type ReviewItem = {
-  id: string;
-  firstname: string;
-  lastname: string;
-  picture: string;
-  text: string;
-};
-
-export const mockReviews: ReviewItem[] = [
-  {
-    firstname: 'Анна',
-    lastname: 'Смирнова',
-    picture: 'https://img.freepik.com/free-photo/indoor-portrait-beautiful-freckled-woman-with-dark-curly-hair-wears-fashionable-striped-shirt-rejoices-day-off-isolated-white-wall-curly-satisfied-woman-stands-indoor-alone_273609-15765.jpg',
-    text: "Недавно воспользовалась услугами сухой мойки автомобилей и осталась крайне удовлетворена. Процесс был проведён профессионально: сотрудники использовали качественные средства, которые не повредили лакокрасочное покрытие. Особенно впечатлила возможность мыть машину без воды, что не только экономит ресурсы, но и бережет окружающую среду. Рекомендую всем, кто заботится о своём автомобиле и экологии!"
-  },
-  {
-    firstname: 'Дмитрий',
-    lastname: 'Петров',
-    picture: 'https://img.freepik.com/free-photo/calm-handsome-curly-haired-boy-posing-isolated-light-grey-standing-still-looks-peaceful-wearing-casual-manner-youth-style-concept_176532-8831.jpg',
-    text: "Как же я рад, что нашел эту сухую мойку! Моя машина сияет, как новенькая! 🌟 Сначала был скептически настроен, думал, как же без воды можно отмыть всё это? Но результат превзошёл все ожидания! Ветеринар мойки профессионально подошёл к делу, и она теперь выглядит потрясающе. Если вы хотите, чтобы ваш автомобиль всегда выглядел на 100%, обязательно попробуйте!"
-  },
-  {
-    firstname: 'Алексей',
-    lastname: 'Сидоров',
-    picture: 'https://img.freepik.com/free-photo/waist-up-portrait-handsome-serious-unshaven-male-keeps-hands-together-dressed-dark-blue-shirt-has-talk-with-interlocutor-stands-against-white-wall-self-confident-man-freelancer_273609-16320.jpg',
-    text: "Сухая мойка автомобилей - интересное решение, которое я опробовал недавно. В целом остался доволен качеством работы. Однако, не все загрязнения удалось удалить с первого раза, но сотрудник предложил дополнительные услуги, что меня устроило. Плюс, большое внимание уделили защите поверхности, что тоже немаловажно. Думаю, в следующий раз снова воспользуюсь этой услугой."
-  },
-  {
-    firstname: 'Екатерина',
-    lastname: 'Иванова',
-    picture: 'https://img.freepik.com/free-photo/portrait-young-blonde-woman-with-plait-polka-dot-blouse_273609-10490.jpg',
-    text: "К сожалению, мой опыт с сухой мойкой автомобилей оказался неудачным. Ожидала увидеть чистую машину после процедуры, но многие участки остались незаделанными. Кроме того, процедура заняла больше времени, чем мне обещали. Возможно, в этом конкретном центре что-то пошло не так, но я бы не стала повторно обращаться за этой услугой."
-  },
-].map((data, i) => ({ id: `review${i}`, ...data }));
+export * as mockOrder from './order';
+export * as mockReview from './review';

src/mocks/landing/order.ts

@@ -0,0 +1,7 @@
+import { Order } from "../../models";
+
+export const orders: Order.View[] = [
+  { id: 'id1' },
+  { id: 'id2' },
+  { id: 'id3' },
+];

src/mocks/landing/review.ts

@@ -0,0 +1,64 @@
+import { LANGUAGES, Review } from "../../models";
+
+const addId = (items) => items.map((data, i) => ({ id: `review${i}`, ...data }));
+
+const enReviews: Review.View[] = addId([
+  {
+    firstname: 'Anna',
+    lastname: 'Smirnova',
+    picture: 'https://img.freepik.com/free-photo/indoor-portrait-beautiful-freckled-woman-with-dark-curly-hair-wears-fashionable-striped-shirt-rejoices-day-off-isolated-white-wall-curly-satisfied-woman-stands-indoor-alone_273609-15765.jpg',
+    text: "I recently used the services of a dry car wash and was extremely satisfied. The process was carried out professionally: the staff used high-quality products that did not damage the paintwork. I was especially impressed by the ability to wash the car without water, which not only saves resources, but also protects the environment. I recommend it to everyone who cares about their car and the environment!"
+  },
+  {
+    firstname: 'Dmitry',
+    lastname: 'Petrov',
+    picture: 'https://img.freepik.com/free-photo/calm-handsome-curly-haired-boy-posing-isolated-light-grey-standing-still-looks-peaceful-wearing-casual-manner-youth-style-concept_176532-8831.jpg',
+    text: "I'm so glad I found this dry sink! My car is shining like new! 🌟 At first I was skeptical, I thought, how can you wash all this without water? But the result exceeded all expectations! Moika's veterinarian took a professional approach to the case, and she now looks amazing. If you want your car to always look 100%, be sure to try it!"
+  },
+  {
+    firstname: 'Alexey',
+    lastname: 'Sidorov',
+    picture: 'https://img.freepik.com/free-photo/waist-up-portrait-handsome-serious-unshaven-male-keeps-hands-together-dressed-dark-blue-shirt-has-talk-with-interlocutor-stands-against-white-wall-self-confident-man-freelancer_273609-16320.jpg',
+    text: "Dry car washing is an interesting solution that I tried out recently. Overall, I was satisfied with the quality of the work. However, not all the impurities were removed the first time, but the employee offered additional services, which suited me. Plus, a lot of attention was paid to surface protection, which is also important. I think I'll use this service again next time."
+  },
+  {
+    firstname: 'Ekaterina',
+    lastname: 'Ivanova',
+    picture: 'https://img.freepik.com/free-photo/portrait-young-blonde-woman-with-plait-polka-dot-blouse_273609-10490.jpg',
+    text: "Unfortunately, my experience with dry car washing turned out to be unsuccessful. I expected to see a clean car after the procedure, but many areas remained undone. Besides, the procedure took longer than I was promised. Perhaps something went wrong in this particular center, but I would not apply for this service again."
+  },
+]);
+
+const ruReviews: Review.View[] = addId([
+  {
+    firstname: 'Анна',
+    lastname: 'Смирнова',
+    picture: 'https://img.freepik.com/free-photo/indoor-portrait-beautiful-freckled-woman-with-dark-curly-hair-wears-fashionable-striped-shirt-rejoices-day-off-isolated-white-wall-curly-satisfied-woman-stands-indoor-alone_273609-15765.jpg',
+    text: "Недавно воспользовалась услугами сухой мойки автомобилей и осталась крайне удовлетворена. Процесс был проведён профессионально: сотрудники использовали качественные средства, которые не повредили лакокрасочное покрытие. Особенно впечатлила возможность мыть машину без воды, что не только экономит ресурсы, но и бережет окружающую среду. Рекомендую всем, кто заботится о своём автомобиле и экологии!"
+  },
+  {
+    firstname: 'Дмитрий',
+    lastname: 'Петров',
+    picture: 'https://img.freepik.com/free-photo/calm-handsome-curly-haired-boy-posing-isolated-light-grey-standing-still-looks-peaceful-wearing-casual-manner-youth-style-concept_176532-8831.jpg',
+    text: "Как же я рад, что нашел эту сухую мойку! Моя машина сияет, как новенькая! 🌟 Сначала был скептически настроен, думал, как же без воды можно отмыть всё это? Но результат превзошёл все ожидания! Ветеринар мойки профессионально подошёл к делу, и она теперь выглядит потрясающе. Если вы хотите, чтобы ваш автомобиль всегда выглядел на 100%, обязательно попробуйте!"
+  },
+  {
+    firstname: 'Алексей',
+    lastname: 'Сидоров',
+    picture: 'https://img.freepik.com/free-photo/waist-up-portrait-handsome-serious-unshaven-male-keeps-hands-together-dressed-dark-blue-shirt-has-talk-with-interlocutor-stands-against-white-wall-self-confident-man-freelancer_273609-16320.jpg',
+    text: "Сухая мойка автомобилей - интересное решение, которое я опробовал недавно. В целом остался доволен качеством работы. Однако, не все загрязнения удалось удалить с первого раза, но сотрудник предложил дополнительные услуги, что меня устроило. Плюс, большое внимание уделили защите поверхности, что тоже немаловажно. Думаю, в следующий раз снова воспользуюсь этой услугой."
+  },
+  {
+    firstname: 'Екатерина',
+    lastname: 'Иванова',
+    picture: 'https://img.freepik.com/free-photo/portrait-young-blonde-woman-with-plait-polka-dot-blouse_273609-10490.jpg',
+    text: "К сожалению, мой опыт с сухой мойкой автомобилей оказался неудачным. Ожидала увидеть чистую машину после процедуры, но многие участки остались незаделанными. Кроме того, процедура заняла больше времени, чем мне обещали. Возможно, в этом конкретном центре что-то пошло не так, но я бы не стала повторно обращаться за этой услугой."
+  },
+]);
+
+const reviewsMapByLocale: Record<LANGUAGES, Review.View[]> = {
+  [LANGUAGES.en]: enReviews,
+  [LANGUAGES.ru]: ruReviews
+};
+
+export const getReviewsByLocale = (locale: string) => reviewsMapByLocale[locale];

src/models/i18n.ts

@@ -0,0 +1,4 @@
+export const enum LANGUAGES {
+  en = 'en',
+  ru = 'ru'
+}

src/models/i18next.d.ts

@@ -0,0 +1,31 @@
+import defaultLocale from '../../locales/ru.json';
+
+type Split<S extends string, D extends string> =
+  S extends `${infer A}${D}${infer B}` ? [A, ...Split<B, D>] : [S];
+
+type NestedObject<T extends string[]> =
+  T extends [infer Head, ...infer Tail] ?
+    Head extends string ?
+      { [key in Head]: NestedObject<Tail extends string[] ? Tail : []> } : never :
+    string;
+
+// Основная утилита для обработки union type
+type CreateTree<T> =
+  UnionToIntersection<T extends infer U ?
+    U extends string ?
+      NestedObject<Split<U, '.'>> : never : never>;
+
+// Утилита для объединения типов
+type UnionToIntersection<U> =
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+
+type LanguageResource = CreateTree<keyof typeof defaultLocale>;
+
+declare module "i18next" {
+  interface CustomTypeOptions {
+    resources: {
+      '~': LanguageResource
+    };
+  }
+}

src/models/index.ts

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

src/models/order.ts

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

src/models/review.ts

@@ -0,0 +1,9 @@
+export type Id = string;
+
+export type View = {
+  id: Id;
+  firstname: string;
+  lastname: string;
+  picture: URL['href'];
+  text: string;
+};

src/pages/arm/index.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React from 'react';
+
 import LayoutArm from '../../components/LayoutArm';
 
 const Page = () => {

src/pages/landing/index.tsx

@@ -1,5 +1,6 @@
 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 +20,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'>
+          <VStack as='main' flexGrow={1}>
             <BenefitsSection />
             <SocialProofSection />
           </VStack>
-          </Box>
           <Footer />
         </VStack>
       </Container>

src/pages/notFound/notFound.tsx

@@ -2,9 +2,10 @@ 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';
 
+import animate from '../../assets/animation/notFound.json';
+
 const NotFound = () => {
   return (
     <Center minH='100vh'>

src/pages/order-form/index.tsx

@@ -1,7 +1,21 @@
-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 { mockOrder } from '../../mocks/landing';
 
 const Page = () => {
-  return <h1>Order form </h1>;
+  return (
+    <>
+      <h1>Order form</h1>
+      {mockOrder.orders.map(({ id }) => (
+        <Button key={id} as={RouterLink} to={URLs.orderView.getUrl(id)}>
+          Посмотреть заказ {id}
+        </Button>
+      ))}
+    </>
+  );
 };
 
 export default Page;

src/routes.tsx

@@ -1,7 +1,9 @@
 import React, { lazy, Suspense } from 'react';
 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'));
@@ -12,12 +14,12 @@ const Routers = () => {
   return (
     <Suspense fallback={<PageSpinner />}>
       <Routes>
-        <Route path='/dry-wash'>
-          <Route index element={<Landing />} />
-          <Route path='order-form' element={<OrderForm />} />
-          <Route path='order-view' element={<OrderView />} />
-        </Route>
-        <Route path='/dry-wash/arm/*' element={<Arm />}></Route>
+        <Route path={URLs.landing.url} element={<Landing />} />
+        <Route path={URLs.orderForm.url} element={<OrderForm />} />
+        <Route path={URLs.orderView.url} element={<OrderView />} />
+        {URLs.armBase.isOn && (
+          <Route path={URLs.armBase.url} element={<Arm />}></Route>
+        )}
         <Route path='*' element={<NotFound />} />
       </Routes>
     </Suspense>