th-333: Driver order page (BinaryStudioAcademy#339)

* th-333: + basic markup

* th-333: + icons

* th-333: + style improvements

* th-333: * icons align fixed

* th-333: * added spaces

* th-333: * className fixes

* th-333: * move route

* th-333: + Driver order page functionality

* th-333: + message on button click

* th-333: + order status change

* th-333: * fix

* th-333: - unnecessary fragment

* th-333: * fixed map

* th-333: - unused method

* th-333: * fixed routes

* th-333: * minor fix

* th-333: * ci fix

* th-333: * resolve comments

* th-333: * fix

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

@@ -162,6 +162,11 @@ class SocketService {
             return;
           }
 
+          await socket.join(`${RoomPrefix.DRIVER_ORDER}${user.id}`);
+          logger.info(
+            `${socket.id} connected to ${RoomPrefix.DRIVER_ORDER}${user.id}`,
+          );
+
           await shiftSocketService.initializeListeners({
             user,
             socket,
@@ -174,6 +179,15 @@ class SocketService {
     });
   }
 
+  public notifyOrderCreate(
+    driverId: OrderResponseDto['id'],
+    order: OrderResponseDto,
+  ): void {
+    this.io
+      ?.to(`${RoomPrefix.DRIVER_ORDER}${driverId}`)
+      .emit(ServerToClientEvent.ORDER_CREATED, order);
+  }
+
   public notifyOrderUpdate(
     id: OrderResponseDto['id'],
     order: Partial<OrderResponseDto>,

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

@@ -141,7 +141,7 @@ class OrderService implements Omit<IService, 'find'> {
       customerPhone: phoneInOrder,
     });
 
-    return OrderEntity.initialize({
+    const orderObject = OrderEntity.initialize({
       ...order,
       shiftId: shift.id,
       driver: {
@@ -154,6 +154,10 @@ class OrderService implements Omit<IService, 'find'> {
       },
       truck: { id: truck.id, licensePlateNumber: truck.licensePlateNumber },
     }).toObject();
+
+    this.socketService.notifyOrderCreate(driver.id, orderObject);
+
+    return orderObject;
   }
 
   public async findById({
@@ -262,7 +266,7 @@ class OrderService implements Omit<IService, 'find'> {
     payload: OrderUpdateAcceptStatusRequestDto;
     user: UserEntityObjectWithGroupT;
   }): Promise<OrderUpdateAcceptStatusResponseDto> {
-    const statusForUpdate = this.checkIsOrderAccepted(payload.isAccepted, user);
+    const statusForUpdate = this.checkIsOrderAccepted(payload.newStatus, user);
 
     await this.shiftService.checkDriverStartShift(user.id);
 
@@ -294,7 +298,7 @@ class OrderService implements Omit<IService, 'find'> {
     payload: OrderUpdateAcceptStatusRequestDto;
     user: UserEntityObjectWithGroupT | null;
   }): Promise<OrderUpdateAcceptStatusResponseDto> {
-    const statusForUpdate = this.checkIsOrderAccepted(payload.isAccepted, user);
+    const statusForUpdate = this.checkIsOrderAccepted(payload.newStatus, user);
 
     const updatedOrder = await this.orderRepository.update({
       id: orderId,
@@ -399,14 +403,17 @@ class OrderService implements Omit<IService, 'find'> {
   }
 
   private checkIsOrderAccepted(
-    isAccepted: boolean,
+    newStatus: OrderStatusValues,
     user: UserEntityObjectWithGroupT | null,
   ): OrderStatusValues {
     if (user && checkIsDriver(user.group.key)) {
-      return isAccepted ? OrderStatus.CONFIRMED : OrderStatus.REJECTED;
+      return newStatus;
     }
 
-    if ((!user || checkIsCustomer(user.group.key)) && !isAccepted) {
+    if (
+      (!user || checkIsCustomer(user.group.key)) &&
+      newStatus !== OrderStatus.PICKING_UP
+    ) {
       return OrderStatus.CANCELED;
     }
 

frontend/src/libs/components/driver-socket-provider/driver-socket-provider.tsx

@@ -1,10 +1,12 @@
 import { type FC } from 'react';
 
 import { DataStatus } from '~/libs/enums/data-status.enum';
+import { AppRoute } from '~/libs/enums/enums.js';
 import {
   useAppDispatch,
   useAppSelector,
   useEffect,
+  useNavigate,
 } from '~/libs/hooks/hooks.js';
 import { notification } from '~/libs/packages/notification/notification.js';
 import {
@@ -17,6 +19,7 @@ import {
   selectSocketDriverAuthStatus,
   selectUser,
 } from '~/slices/auth/selectors.js';
+import { selectOrder } from '~/slices/orders/selectors.js';
 
 import { RouterOutlet } from '../router/router.js';
 
@@ -27,6 +30,9 @@ const DriverSocketProvider: FC = () => {
   );
   const user = useAppSelector(selectUser);
   const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+
+  const currentOrder = useAppSelector(selectOrder);
   useEffect(() => {
     socketTryAddDriverListeners(dispatch);
 
@@ -44,6 +50,12 @@ const DriverSocketProvider: FC = () => {
     };
   }, [dispatch, socketDriverAuthStatus, user, socketDriverAuthErrorMessage]);
 
+  useEffect(() => {
+    if (currentOrder) {
+      navigate(`${AppRoute.ORDERS}/${currentOrder.id}`);
+    }
+  }, [navigate, currentOrder]);
+
   return <RouterOutlet />;
 };
 

frontend/src/libs/components/icon/maps/icon-name-to-svg.map.ts

@@ -2,11 +2,13 @@ import {
   type IconDefinition,
   faArrowDownLong,
   faBars,
+  faCar,
   faCaretDown,
   faCheck,
   faChevronDown,
   faChevronLeft,
   faChevronUp,
+  faClock,
   faClockRotateLeft,
   faCloudUploadAlt,
   faEye,
@@ -16,11 +18,13 @@ import {
   faLocationDot,
   faMap,
   faPen,
+  faPhone,
   faPlus,
   faRightFromBracket,
   faStar,
   faTrashCan,
   faTruckPickup,
+  faUser,
   faUserPen,
   faUsers,
   faXmark,
@@ -46,15 +50,18 @@ const iconNameToSvg: Record<ValueOf<typeof IconName>, IconDefinition> = {
   [IconName.CHECK]: faCheck,
   [IconName.LIST]: faListUl,
   [IconName.BARS]: faBars,
-  [IconName.XMARK]: faXmark,
   [IconName.CLOCK_ROTATE_LEFT]: faClockRotateLeft,
   [IconName.USER_PEN]: faUserPen,
   [IconName.RIGHT_FROM_BRACKET]: faRightFromBracket,
   [IconName.TRASH]: faTrashCan,
   [IconName.TRUCK]: faTruckPickup,
   [IconName.USERS]: faUsers,
+  [IconName.USER]: faUser,
   [IconName.XMARK]: faXmark,
   [IconName.EYE]: faEye,
+  [IconName.PHONE]: faPhone,
+  [IconName.CLOCK]: faClock,
+  [IconName.CAR]: faCar,
 };
 
 export { iconNameToSvg };

frontend/src/libs/components/router/router.tsx

@@ -16,6 +16,7 @@ import {
   Auth,
   AvailableTrucks,
   Dashboard,
+  DriverOrder,
   EditDriverProfilePage,
   HomePage,
   NotFound,
@@ -114,6 +115,15 @@ const Router = (): JSX.Element => {
               </PageLayout>
             }
           />
+
+          <Route
+            path={AppRoute.DRIVER_ORDER}
+            element={
+              <PageLayout isSidebarHidden>
+                <DriverOrder />
+              </PageLayout>
+            }
+          />
         </Route>
       </Route>
       <Route path={AppRoute.ANY} element={<NotFound />} />

frontend/src/libs/enums/app-route.enum.ts

@@ -11,6 +11,7 @@ const AppRoute = {
   DASHBOARD: '/dashboard',
   AVAILABLE_TRUCKS: '/available-trucks',
   ORDERS: '/orders',
+  DRIVER_ORDER: '/orders/:orderId',
   DASHBOARD_ORDERS: '/dashboard/orders',
   DASHBOARD_TRUCKS: '/dashboard/trucks',
   DASHBOARD_DRIVERS: '/dashboard/drivers',

frontend/src/libs/enums/icon-name.enum.ts

@@ -23,6 +23,10 @@ const IconName = {
   RIGHT_FROM_BRACKET: 'right from bracket',
   TRUCK: 'truck',
   USERS: 'users',
+  USER: 'user',
+  PHONE: 'phone',
+  CLOCK: 'clock',
+  CAR: 'car',
 } as const;
 
 export { IconName };

frontend/src/libs/packages/middleware/socket.middleware.ts

@@ -7,6 +7,7 @@ import {
 
 import { type OrderResponseDto } from '~/packages/orders/libs/types/types.js';
 import {
+  createOrderFromSocket,
   subscribeOrderUpdates,
   unsubscribeOrderUpdates,
   updateOrderFromSocket,
@@ -41,6 +42,12 @@ const socketMiddleware: ThunkMiddleware<
   const socketInstance = socket.getInstance();
 
   if (socketInstance) {
+    socketInstance.on(
+      ServerToClientEvent.ORDER_CREATED,
+      (order: OrderResponseDto) => {
+        void dispatch(createOrderFromSocket(order));
+      },
+    );
     socketInstance.on(
       ServerToClientEvent.ORDER_UPDATED,
       (order: OrderResponseDto) => {

frontend/src/pages/available-trucks/available-trucks.tsx

@@ -24,7 +24,7 @@ import {
 import { selectDataStatus, selectTrucks } from '~/slices/trucks/selectors.js';
 import { actions as truckActions } from '~/slices/trucks/trucks.js';
 
-import { AvailableTruckCard } from './components/components.js';
+import { AvailableTruckCard } from './libs/components/components.js';
 import styles from './styles.module.scss';
 
 const AvailableTrucks: React.FC = () => {