feat: Enhance PriceCar component with localization and price formatting

- Added localized translations for car contamination and pricing
- Implemented price formatting with currency and locale support
- Created helper functions for price and progress color generation
- Updated PriceCar component to use dynamic styling and translations
- Improved layout and responsiveness of the component

locales/en.json

@@ -67,6 +67,9 @@
   "dry-wash.order-view.upload-car-image.file-input.button": "Upload",
   "dry-wash.order-view.upload-car-image-query.success.title": "The car image is successfully uploaded",
   "dry-wash.order-view.upload-car-image-query.error.title": "Failed to upload the car image",
+  "dry-wash.order-view.price-car.title": "The level of car contamination:",
+  "dry-wash.order-view.price-car.description": "The cost of washing:",
+  "dry-wash.order-view.price-car.error": "Failed to determine the level of car contamination",
   "dry-wash.arm.master.add": "Add",
   "dry-wash.arm.order.title": "Orders",
   "dry-wash.arm.order.table.empty": "Table empty",

locales/ru.json

@@ -122,6 +122,9 @@
   "dry-wash.order-view.upload-car-image.file-input.button": "Загрузить",
   "dry-wash.order-view.upload-car-image-query.success.title": "Изображение автомобиля успешно загружено",
   "dry-wash.order-view.upload-car-image-query.error.title": "Не удалось загрузить изображение автомобиля",
+  "dry-wash.order-view.price-car.title": "Уровень загрязнения машины:",
+  "dry-wash.order-view.price-car.description": "Стоимость мойки:",
+  "dry-wash.order-view.price-car.error": "Не удалось определить уровень загрязнения машины",
   "dry-wash.notFound.title": "Страница не найдена",
   "dry-wash.notFound.description": "К сожалению, запрашиваемая вами страница не существует.",
   "dry-wash.notFound.button.back": "Вернуться на главную",

src/components/PriceCar/PriceCar.tsx

@@ -1,8 +1,11 @@
-import { Box, Image, Progress, Text } from '@chakra-ui/react';
+import { Box, Image, Progress, Text, VStack } from '@chakra-ui/react';
 import React from 'react';
 import { getFeatures } from '@brojs/cli';
+import { useTranslation } from 'react-i18next';
 
-const PRICE_INCREASE_PERCENT_PER_RATING = 10; // 10% за каждый балл
+import { formatPrice, getProgressColor } from './helper';
+
+const PRICE_INCREASE_PERCENT_PER_RATING = 10;
 
 export const PriceCar = ({ image, rating, description }) => {
   const BASE_WASH_PRICE: number = Number(
@@ -15,33 +18,56 @@ export const PriceCar = ({ image, rating, description }) => {
     return BASE_WASH_PRICE + priceIncrease;
   };
 
+  const { i18n, t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.order-view.price-car',
+  });
   const washPrice = calculateWashPrice(rating);
+  const formattedPrice = formatPrice(washPrice, i18n.language);
+
   const progressValue = (rating / 10) * 100;
+
   return (
     <Box
-      alignItems='center'
       gap={5}
       width='100%'
       display='flex'
-      flexDirection='column'
+      justifyContent='center'
+      alignItems='flex-start'
+      flexWrap='wrap'
     >
       <Image
         maxWidth='600px'
+        width='100%'
         objectFit='contain'
         borderRadius='md'
         src={image}
-        alt='Car Image'
+        alt=''
       />
-      {rating ? (
-        <Box width='100%' maxW='600px'>
-          <Text>Рейтинг загрязнения машины:</Text>
-          <Progress value={progressValue} size='sm' colorScheme='red' mt={2} />
-          <Text mt={2}>Стоимость мойки: {washPrice.toFixed(2)} руб.</Text>
-        </Box>
-      ) : (
-        <Text>Не удалость определить уровень загрязнения машины</Text>
-      )}
-      <Text>{description}</Text>
+      <Box flex='1 1 40%'>
+        {!Number.isNaN(progressValue) ? (
+          <VStack alignItems='stretch'>
+            <Box>
+              <Text>{t('title')}</Text>
+              <Progress
+                value={progressValue}
+                size='sm'
+                sx={{
+                  '& > div': {
+                    backgroundColor: getProgressColor(progressValue),
+                  },
+                }}
+                mt={2}
+              />
+              <Text mt={2}>
+                {t('description')} <b>{formattedPrice}</b>
+              </Text>
+            </Box>
+            <Text fontStyle='italic'>{description}</Text>
+          </VStack>
+        ) : (
+          <Text>{t('error')}</Text>
+        )}
+      </Box>
     </Box>
   );
 };

src/components/PriceCar/helper.ts

@@ -0,0 +1,15 @@
+export const formatPrice = (price: number, locale = 'ru-RU', currency = 'RUB') => {
+  return new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency: currency,
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(price);
+};
+
+export const getProgressColor = (value: number) => {
+  const normalizedValue = value / 100;
+  const hue = 120 - normalizedValue * 120;
+
+  return `hsl(${hue}, 100%, 50%)`;
+};