Merge branch 'development' into fix/th-283-fix-env-for-s3

Author: kalinkaaaa14

backend/src/packages/map/libs/types/types.ts

@@ -2,3 +2,7 @@ export {
   type Client,
   type Distance,
 } from '@googlemaps/google-maps-services-js';
+export {
+  type OrderCalculatePriceRequestDto,
+  type OrderCalculatePriceResponseDto,
+} from 'shared/build/index.js';

backend/src/packages/map/map.service.ts

@@ -1,6 +1,11 @@
 import { TravelMode } from './libs/enums/enums.js';
 import { convertMetersToKm } from './libs/helpers/helpers.js';
-import { type Client, type Distance } from './libs/types/types.js';
+import {
+  type Client,
+  type Distance,
+  type OrderCalculatePriceRequestDto,
+  type OrderCalculatePriceResponseDto,
+} from './libs/types/types.js';
 
 class MapService {
   private client: Client;
@@ -31,19 +36,15 @@ class MapService {
   }
 
   public async getPriceByDistance({
-    startPoint,
-    endPoint,
+    startAddress,
+    endAddress,
     pricePerKm,
-  }: {
-    startPoint: string;
-    endPoint: string;
-    pricePerKm: number;
-  }): Promise<number> {
-    const distance = await this.getDistance(startPoint, endPoint);
+  }: OrderCalculatePriceRequestDto): Promise<OrderCalculatePriceResponseDto> {
+    const distance = await this.getDistance(startAddress, endAddress);
     const km = convertMetersToKm(distance.value);
     const orderPrice = (pricePerKm * km).toFixed(2);
 
-    return Number(orderPrice);
+    return { price: Number(orderPrice) };
   }
 }
 

backend/src/packages/orders/libs/types/types.ts

@@ -7,6 +7,8 @@ type OrderDatabaseModel = InferModel<DatabaseSchema['orders']>;
 export {
   type DriverInfo,
   type Id,
+  type OrderCalculatePriceRequestDto,
+  type OrderCalculatePriceResponseDto,
   type OrderCreateRequestDto,
   type OrderEntity,
   type OrderFindByIdResponseDto,

backend/src/packages/orders/order.controller.ts

@@ -6,13 +6,15 @@ import {
 } from '~/libs/packages/controller/controller.js';
 import { HttpCode } from '~/libs/packages/http/http.js';
 import { type ILogger } from '~/libs/packages/logger/logger.js';
+import { type MapService } from '~/packages/map/map.service.js';
 import { type OrderService } from '~/packages/orders/order.service.js';
 
 import { AuthStrategy } from '../auth/auth.js';
 import { type UserEntityObjectWithGroupT } from '../users/users.js';
 import { OrdersApiPath } from './libs/enums/enums.js';
 import {
   type Id,
+  type OrderCalculatePriceRequestDto,
   type OrderCreateRequestDto,
   type OrderResponseDto,
   type OrderUpdateRequestDto,
@@ -200,16 +202,21 @@ import {
 class OrderController extends Controller {
   private orderService: OrderService;
 
+  private mapService: MapService;
+
   public constructor({
     logger,
     orderService,
+    mapService,
   }: {
     logger: ILogger;
     orderService: OrderService;
+    mapService: MapService;
   }) {
     super(logger, ApiPath.ORDERS);
 
     this.orderService = orderService;
+    this.mapService = mapService;
 
     this.addRoute({
       path: OrdersApiPath.ROOT,
@@ -291,6 +298,19 @@ class OrderController extends Controller {
           }>,
         ),
     });
+
+    this.addRoute({
+      path: OrdersApiPath.CALCULATE_PRICE,
+      method: 'POST',
+      authStrategy: AuthStrategy.INJECT_USER,
+      handler: (options) =>
+        this.calculatePrice(
+          options as ApiHandlerOptions<{
+            body: OrderCalculatePriceRequestDto;
+            user: UserEntityObjectWithGroupT | null;
+          }>,
+        ),
+    });
   }
 
   /**
@@ -574,6 +594,20 @@ class OrderController extends Controller {
       }),
     };
   }
+
+  private async calculatePrice(
+    options: ApiHandlerOptions<{
+      body: OrderCalculatePriceRequestDto;
+      user: UserEntityObjectWithGroupT | null;
+    }>,
+  ): Promise<ApiHandlerResponse> {
+    return {
+      status: HttpCode.OK,
+      payload: await this.mapService.getPriceByDistance({
+        ...options.body,
+      }),
+    };
+  }
 }
 
 export { OrderController };

backend/src/packages/orders/orders.ts

@@ -3,6 +3,7 @@ import { logger } from '~/libs/packages/logger/logger.js';
 
 import { businessService } from '../business/business.js';
 import { driverService } from '../drivers/drivers.js';
+import { mapService } from '../map/map.js';
 import { shiftService } from '../shifts/shift.js';
 import { truckService } from '../trucks/trucks.js';
 import { userService } from '../users/users.js';
@@ -22,6 +23,7 @@ const orderService = new OrderService({
 const orderController = new OrderController({
   logger,
   orderService,
+  mapService,
 });
 
 export { orderController, orderService };

frontend/package.json

@@ -20,8 +20,8 @@
     "@fortawesome/fontawesome-svg-core": "6.4.2",
     "@fortawesome/free-solid-svg-icons": "6.4.2",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@googlemaps/react-wrapper": "1.1.35",
     "@hookform/resolvers": "2.9.11",
+    "@react-google-maps/api": "2.19.2",
     "@reduxjs/toolkit": "1.9.3",
     "@vitejs/plugin-react": "4.0.4",
     "@rollup/pluginutils": "5.0.4",
@@ -32,7 +32,6 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "14.2.3",
-    "react-google-autocomplete": "2.7.3",
     "react-hook-form": "7.43.5",
     "react-redux": "8.1.2",
     "react-router-dom": "6.8.2",

frontend/src/libs/components/components.ts

@@ -29,6 +29,7 @@ export { Spinner } from './spinner/spinner.js';
 export { StarRating } from './star-rating/star-rating.jsx';
 export { Table } from './table/table.js';
 export { Toggle } from './toggle/toggle.js';
+export { TowTruckCard } from './tow-truck-card/tow-truck-card.js';
 export { TruckFilter } from './truck-filter/truck-filter.js';
 export { Provider as StoreProvider } from 'react-redux';
 export { Outlet as RouterOutlet } from 'react-router-dom';

frontend/src/libs/components/form/form.tsx

@@ -20,14 +20,17 @@ import { FileInput } from '../file-input/file-input.js';
 import { fileInputDefaultsConfig } from '../file-input/libs/config/config.js';
 import { type FileFormType } from '../file-input/libs/types/types.js';
 import { Input } from '../input/input.jsx';
+import { LocationInput } from '../location-input/location-input.js';
 import styles from './styles.module.scss';
 
 type Properties<T extends FieldValues> = {
   fields: FormField<T>[];
   defaultValues: DeepPartial<T>;
   validationSchema: ValidationSchema;
   btnLabel?: string;
+  isDisabled?: boolean;
   onSubmit: (payload: T) => void;
+  additionalFields?: JSX.Element;
 };
 
 type Parameters<T extends FieldValues = FieldValues> = {
@@ -45,10 +48,10 @@ const renderField = <T extends FieldValues = FieldValues>({
   setError,
   clearErrors,
 }: Parameters<T>): JSX.Element => {
-  const { options, name, label } = field;
-
   switch (field.type) {
     case 'dropdown': {
+      const { options, name, label } = field;
+
       return (
         <DropdownInput
           options={options ?? []}
@@ -65,7 +68,10 @@ const renderField = <T extends FieldValues = FieldValues>({
     case 'password': {
       return <Input {...field} control={control} errors={errors} />;
     }
+
     case 'file': {
+      const { label } = field;
+
       return (
         <FileInput
           setError={setError as unknown as UseFormSetError<FileFormType>}
@@ -80,6 +86,10 @@ const renderField = <T extends FieldValues = FieldValues>({
         />
       );
     }
+    case 'location': {
+      return <LocationInput {...field} control={control} errors={errors} />;
+    }
+
     default: {
       return <Input {...field} control={control} errors={errors} />;
     }
@@ -91,6 +101,8 @@ const Form = <T extends FieldValues = FieldValues>({
   defaultValues,
   validationSchema,
   btnLabel,
+  additionalFields,
+  isDisabled,
   onSubmit,
 }: Properties<T>): JSX.Element => {
   const { control, errors, handleSubmit, setError, clearErrors } =
@@ -117,7 +129,13 @@ const Form = <T extends FieldValues = FieldValues>({
   return (
     <form onSubmit={handleFormSubmit} className={styles.form} noValidate>
       {createInputs()}
-      <Button type="submit" label={btnLabel ?? 'Submit'} isFullWidth />
+      {additionalFields}
+      <Button
+        type="submit"
+        label={btnLabel ?? 'Submit'}
+        isDisabled={isDisabled}
+        isFullWidth
+      />
     </form>
   );
 };

frontend/src/libs/components/input/input.tsx

@@ -5,13 +5,15 @@ import {
   type FieldValues,
 } from 'react-hook-form';
 
+import { type InputType } from '~/libs/enums/enums.js';
 import { IconName } from '~/libs/enums/icon-name.enum.js';
 import { getValidClassNames } from '~/libs/helpers/helpers.js';
 import {
   useCallback,
   useFormController,
   useState,
 } from '~/libs/hooks/hooks.js';
+import { type ValueOf } from '~/libs/types/types.js';
 
 import { Icon } from '../components.js';
 import styles from './styles.module.scss';
@@ -22,7 +24,7 @@ type Properties<T extends FieldValues> = {
   label?: string;
   name: FieldPath<T>;
   placeholder?: string;
-  type?: 'text' | 'email' | 'password' | 'number' | 'dropdown' | 'file';
+  type?: ValueOf<typeof InputType>;
   isDisabled?: boolean;
   min?: number;
   max?: number;

frontend/src/libs/components/input/styles.module.scss

@@ -7,7 +7,6 @@ $error-message-height: calc($error-font-size * $line-height-coefficient);
 .inputComponentWrapper {
   display: flex;
   flex-direction: column;
-  max-width: 327px;
   color: $grey-dark;
   font-weight: $font-weight-semibold;
   font-size: 16px;