th-219: Customer Journey Implement Order screen (#222)

* th-219: + status component

* th-219: + add order screen

* th-219: + add order screen

* th-126: - order share files

* th-219: * shared folder types

* th-219: * socket service

* th-219: * socket emit

* th-219: + liste events

* th-219: * styles

* th-219: * styles

* th-219: * styles

* th-219: - package-lock

* th-219: * map height

* th-219: * map height

* th-219: * package-lock

* th-219: * package.json

* th-219: + reversed geocoding

* th-219: * merge conflict

* th-219: * order response

* th-219: + distance and duration calculation

* th-219: + truck position update

* th-219: + truck arrival time update

* th-219: + ticker

* th-219: * rename component

* th-219: * moved deps to components

* th-219: * fixed styles

* th-219: * fixe merge conflicts

* th-219: + google deps

* th-219: - comments

* th-219: + map hook

* th-219: + panto

* th-219: * map smooth update

* th-219: - mocks

* th-219: * styles

* th-219: + unsubscribe sockets on page leave

* th-219: * logger message

* th-219: * conditionals

* th-219: * subcomponents structure

* th-219: * replaced factory with class

* th-219: * moved map to connector

* th-219: * types fixed

* th-219: * replaced factory with class

* th-219: * helpers

* th-219: * helpers

* th-219: * map center

* th-219: * added hooks

* th-219: * enums

---------

Co-authored-by: albsbz <[email protected]>

Author: albsbz

backend/src/libs/packages/socket/libs/enums/enums.ts

@@ -1,6 +1,7 @@
 export { SocketRoom } from './socket-room.js';
 export {
   ClientToServerEvent,
+  RoomPrefix,
   ServerToClientEvent,
   ServerToClientResponseStatus,
   SocketError,

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

@@ -1,4 +1,5 @@
 export {
   type ClientToServerEventParameter,
+  type OrderResponseDto,
   ServerToClientEvent,
 } from 'shared/build/index.js';

backend/src/libs/packages/socket/socket.service.ts

@@ -1,4 +1,5 @@
 import { type FastifyInstance } from 'fastify/types/instance';
+import { type ServerToClientEventParameter } from 'shared/build/index.js';
 import { type Server, type Socket, Server as SocketServer } from 'socket.io';
 
 import { type GeolocationCacheSocketService } from '~/libs/packages/geolocation-cache/geolocation-cache.js';
@@ -10,11 +11,13 @@ import { type UserService } from '~/packages/users/user.service';
 
 import {
   ClientToServerEvent,
+  RoomPrefix,
   SocketError,
   SocketRoom,
 } from './libs/enums/enums.js';
 import {
   type ClientToServerEventParameter,
+  type OrderResponseDto,
   ServerToClientEvent,
 } from './libs/types/types.js';
 
@@ -69,6 +72,54 @@ class SocketService {
       socket.on(ClientToServerEvent.LEAVE_HOME_ROOM, () =>
         socket.leave(SocketRoom.HOME_ROOM),
       );
+      socket.on(
+        ClientToServerEvent.SUBSCRIBE_ORDER_UPDATES,
+        async ({
+          orderId,
+        }: FirstParameter<
+          ClientToServerEventParameter[typeof ClientToServerEvent.SUBSCRIBE_ORDER_UPDATES]
+        >) => {
+          await socket.join(`${RoomPrefix.ORDER}${orderId}`);
+          logger.info(
+            `${socket.id} connected to ${RoomPrefix.ORDER}${orderId}`,
+          );
+        },
+      );
+      socket.on(
+        ClientToServerEvent.UNSUBSCRIBE_ORDER_UPDATES,
+        async ({
+          orderId,
+        }: FirstParameter<
+          ClientToServerEventParameter[typeof ClientToServerEvent.UNSUBSCRIBE_ORDER_UPDATES]
+        >) => {
+          await socket.leave(`${RoomPrefix.ORDER}${orderId}`);
+          logger.info(`${socket.id} left ${RoomPrefix.ORDER}${orderId}`);
+        },
+      );
+      socket.on(
+        ClientToServerEvent.SUBSCRIBE_TRUCK_UPDATES,
+        async ({
+          truckId,
+        }: FirstParameter<
+          ClientToServerEventParameter[typeof ClientToServerEvent.SUBSCRIBE_TRUCK_UPDATES]
+        >) => {
+          await socket.join(`${RoomPrefix.TRUCK}${truckId}`);
+          logger.info(
+            `${socket.id} connected to ${RoomPrefix.TRUCK}${truckId}`,
+          );
+        },
+      );
+      socket.on(
+        ClientToServerEvent.UNSUBSCRIBE_TRUCK_UPDATES,
+        async ({
+          truckId,
+        }: FirstParameter<
+          ClientToServerEventParameter[typeof ClientToServerEvent.UNSUBSCRIBE_TRUCK_UPDATES]
+        >) => {
+          await socket.leave(`${RoomPrefix.TRUCK}${truckId}`);
+          logger.info(`${socket.id} left ${RoomPrefix.TRUCK}${truckId}`);
+        },
+      );
 
       socket.on(
         ClientToServerEvent.AUTHORIZE_DRIVER,
@@ -94,6 +145,26 @@ class SocketService {
       );
     });
   }
+
+  public notifyOrderUpdate(
+    id: OrderResponseDto['id'],
+    order: OrderResponseDto,
+  ): void {
+    this.io
+      ?.to(`${RoomPrefix.ORDER}${id}`)
+      .emit(ServerToClientEvent.ORDER_UPDATED, order);
+  }
+
+  public notifyCustomerForTruckLocationUpdate(
+    truckId: number,
+    truckLocation: Parameters<
+      ServerToClientEventParameter[typeof ServerToClientEvent.TRUCK_LOCATION_UPDATED]
+    >[0],
+  ): void {
+    this.io
+      ?.to(`${RoomPrefix.TRUCK}${truckId}`)
+      .emit(ServerToClientEvent.TRUCK_LOCATION_UPDATED, truckLocation);
+  }
 }
 
 export { SocketService };

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

@@ -1,4 +1,5 @@
 export {
+  ClientToServerEvent,
   OrdersApiPath,
   OrderStatus,
   UserGroupKey,

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

@@ -10,8 +10,7 @@ export {
   type OrderCalculatePriceRequestDto,
   type OrderCalculatePriceResponseDto,
   type OrderCreateRequestDto,
-  type OrderEntityT,
-  type OrderFindByIdResponseDto,
+  type OrderEntity,
   type OrderResponseDto,
   type OrderUpdateRequestDto,
 } from 'shared/build/index.js';

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

@@ -5,7 +5,7 @@ import { type ShiftEntityT } from '../shifts/shift.js';
 import { type TruckEntityT } from '../trucks/libs/types/types.js';
 import {
   type DriverInfo,
-  type OrderEntityT,
+  type OrderEntity as OrderEntityT,
   type OrderResponseDto,
 } from './libs/types/types.js';
 

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

@@ -8,7 +8,7 @@ import { type UserEntityT } from '../users/users.js';
 import { combineFilters } from './libs/helpers/combine-filters.js';
 import {
   type OrderDatabaseModel,
-  type OrderEntityT as OrderEntityT,
+  type OrderEntity as OrderEntityT,
 } from './libs/types/types.js';
 
 class OrderRepository implements Omit<IRepository, 'find'> {

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

@@ -1,6 +1,7 @@
 import { HttpMessage } from '~/libs/enums/enums.js';
 import { NotFoundError } from '~/libs/exceptions/exceptions.js';
 import { type IService } from '~/libs/interfaces/interfaces.js';
+import { type SocketService } from '~/libs/packages/socket/socket.service.js';
 
 import { type BusinessService } from '../business/business.service.js';
 import { type DriverService } from '../drivers/driver.service.js';
@@ -11,7 +12,7 @@ import { type UserEntityObjectWithGroupT } from '../users/users.js';
 import { OrderStatus, UserGroupKey } from './libs/enums/enums.js';
 import {
   type OrderCreateRequestDto,
-  type OrderEntityT as OrderEntityT,
+  type OrderEntity as OrderEntityT,
   type OrderResponseDto,
   type OrderUpdateRequestDto,
 } from './libs/types/types.js';
@@ -31,20 +32,24 @@ class OrderService implements Omit<IService, 'find'> {
 
   private userService: UserService;
 
+  private socketService: SocketService;
+
   public constructor({
     businessService,
     orderRepository,
     driverService,
     shiftService,
     truckService,
     userService,
+    socket,
   }: {
     orderRepository: OrderRepository;
     businessService: BusinessService;
     driverService: DriverService;
     shiftService: ShiftService;
     truckService: TruckService;
     userService: UserService;
+    socket: SocketService;
   }) {
     this.orderRepository = orderRepository;
 
@@ -57,6 +62,8 @@ class OrderService implements Omit<IService, 'find'> {
     this.truckService = truckService;
 
     this.userService = userService;
+
+    this.socketService = socket;
   }
 
   public async create(
@@ -220,7 +227,10 @@ class OrderService implements Omit<IService, 'find'> {
       truck: { id: truck.id, licensePlateNumber: truck.licensePlateNumber },
     };
 
-    return OrderEntity.initialize(orderExtended).toObject();
+    const order = OrderEntity.initialize(orderExtended).toObject();
+    this.socketService.notifyOrderUpdate(order.id, order);
+
+    return order;
   }
 
   public async findAllBusinessOrders(

backend/src/packages/orders/orders.ts

@@ -1,5 +1,6 @@
 import { database, schema } from '~/libs/packages/database/database.js';
 import { logger } from '~/libs/packages/logger/logger.js';
+import { socket } from '~/libs/packages/socket/socket.js';
 
 import { businessService } from '../business/business.js';
 import { driverService } from '../drivers/drivers.js';
@@ -19,6 +20,7 @@ const orderService = new OrderService({
   shiftService,
   truckService,
   userService,
+  socket,
 });
 const orderController = new OrderController({
   logger,

frontend/package.json

@@ -20,14 +20,15 @@
     "@fortawesome/fontawesome-svg-core": "6.4.2",
     "@fortawesome/free-solid-svg-icons": "6.4.2",
     "@fortawesome/react-fontawesome": "0.2.0",
+    "@googlemaps/js-api-loader": "1.16.2",
     "@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",
     "@svgr/core": "8.1.0",
     "@tanstack/react-table": "8.9.3",
     "balloon-css": "1.2.0",
+    "@vitejs/plugin-react": "4.0.4",
     "clsx": "2.0.0",
     "modern-normalize": "2.0.0",
     "react": "18.2.0",