feat: add a car wash cost determination

bro.config.js

@@ -21,16 +21,21 @@ module.exports = {
   features: {
     'dry-wash': {
       // add your features here in the format [featureName]: { value: string }
-      "order-view-status-polling": {
-        "on": true,
-        "value": "3000",
-        "key": "order-view-status-polling"
+      'order-view-status-polling': {
+        on: true,
+        value: '3000',
+        key: 'order-view-status-polling',
+      },
+      'car-img-upload': {
+        on: true,
+        value: 'true',
+        key: 'car-img-upload',
+      },
+      'order-cost': {
+        on: true,
+        value: '1000',
+        key: 'order-cost',
       },
-      "car-img-upload": {
-        "on": true,
-        "value": "true",
-        "key": "car-img-upload"
-      }
     },
   },
   config: {

src/components/PriceCar/PriceCar.tsx

@@ -0,0 +1,48 @@
+import { Box, Image, Progress, Text } from '@chakra-ui/react';
+import React from 'react';
+import { getFeatures } from '@brojs/cli';
+
+const PRICE_INCREASE_PERCENT_PER_RATING = 10; // 10% за каждый балл
+
+export const PriceCar = ({ image, rating }) => {
+  const BASE_WASH_PRICE: number = Number(
+    getFeatures('dry-wash')['order-cost'].value,
+  );
+
+  const calculateWashPrice = (rating: number) => {
+    const priceIncrease =
+      (BASE_WASH_PRICE * PRICE_INCREASE_PERCENT_PER_RATING * rating) / 100;
+    return BASE_WASH_PRICE + priceIncrease;
+  };
+
+  const washPrice = calculateWashPrice(rating);
+  const progressValue = (rating / 10) * 100;
+  return (
+    <Box
+      alignItems='center'
+      gap={5}
+      width='100%'
+      display='flex'
+      flexDirection='column'
+    >
+      <Image
+        maxWidth='600px'
+        objectFit='contain'
+        borderRadius='md'
+        src={image}
+        alt='Car Image'
+      />
+      {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>
+      )}
+    </Box>
+  );
+};
+
+export default PriceCar;

src/components/PriceCar/index.ts

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

src/models/landing/order.ts

@@ -1,29 +1,30 @@
-import { IsoDate } from "../common";
+import { IsoDate } from '../common';
 
-import { Car, Customer, Washing } from ".";
+import { Car, Customer, Washing } from '.';
 
 export type Id = string;
 
-export type Status = 'pending' |
-  'progress' |
-  'working' |
-  'canceled' |
-  'complete';
+export type Status =
+  | 'pending'
+  | 'progress'
+  | 'working'
+  | 'canceled'
+  | 'complete';
 
 export type Create = {
   customer: {
-    phone: Customer.PhoneNumber,
+    phone: Customer.PhoneNumber;
   };
   car: {
-    number: Car.RegistrationNumber,
-    body: Car.BodyStyle,
-    color: Car.Color,
-  },
+    number: Car.RegistrationNumber;
+    body: Car.BodyStyle;
+    color: Car.Color;
+  };
   washing: {
-    location: Washing.Location
-    begin: Washing.AvailableBeginDateTime,
-    end: Washing.AvailableEndDateTime,
-  }
+    location: Washing.Location;
+    begin: Washing.AvailableBeginDateTime;
+    end: Washing.AvailableEndDateTime;
+  };
 };
 
 export type Number = string;
@@ -36,10 +37,12 @@ export type View = {
   location: Washing.Location;
   startWashTime: Washing.AvailableBeginDateTime;
   endWashTime: Washing.AvailableEndDateTime;
-  orderNumber: Number,
-  status: Status,
+  orderNumber: Number;
+  status: Status;
   notes: string;
   created: IsoDate;
   updated: IsoDate;
   id: Id;
-};
+  image?: string;
+  imageRating?: string;
+};

src/pages/order-view/index.tsx

@@ -22,6 +22,7 @@ import { landingApi } from '../../__data__/service/landing.api';
 import { isErrorMessage } from '../../models/api';
 import { FEATURE } from '../../__data__/features';
 import { CarImageForm } from '../../components/order-view/car-img';
+import PriceCar from '../../components/PriceCar';
 
 const Page: FC = () => {
   const { t } = useTranslation('~', {
@@ -70,7 +71,12 @@ const Page: FC = () => {
             <>
               <>
                 {isSuccess && (
-                  <VStack p={4} alignItems='flex-start' gap={4} data-testid='order-details'>
+                  <VStack
+                    p={4}
+                    alignItems='flex-start'
+                    gap={4}
+                    data-testid='order-details'
+                  >
                     <OrderDetails
                       orderNumber={order.orderNumber}
                       status={order.status}
@@ -81,9 +87,17 @@ const Page: FC = () => {
                       location={order.location}
                       startWashTime={order.startWashTime}
                       endWashTime={order.endWashTime}
-                      created={order.created}                      
+                      created={order.created}
                     />
-                    {FEATURE.carImageUpload.isOn && <CarImageForm orderId={orderId} />}                    
+                    {FEATURE.carImageUpload.isOn && (
+                      <CarImageForm orderId={orderId} />
+                    )}
+                    {FEATURE.carImageUpload.isOn && order.image && (
+                      <PriceCar
+                        image={order?.image}
+                        rating={order?.imageRating}
+                      />
+                    )}
                   </VStack>
                 )}
               </>

stubs/json/landing-order-view/id1-success-working.json

@@ -15,4 +15,4 @@
       "updated": "2025-01-19T14:04:02.987Z",
       "id": "id1"
   }
-}
+}