th-337: Remove time field from order form (#346)

* th-337: * fixes

* th-337: - comment

* th-337: - mock

* th-337: * comment fixes

* th-337: * validation error messages fix

* th-333: * validation message fix

Author: DmytroVoronkov

frontend/src/pages/order/libs/components/libs/fields.ts

@@ -10,7 +10,6 @@ const getOrderFormFields = (
 ): FormField<OrderCreateRequestDto>[] => [
   { label: 'Name', name: 'customerName' },
   { label: 'Phone', name: 'customerPhone' },
-  { label: 'Time', name: 'scheduledTime', type: 'date' },
   {
     label: 'Location',
     name: 'startPoint',

frontend/src/pages/order/libs/components/libs/helpers.ts

@@ -2,13 +2,19 @@ import { type OrderCreateRequestDto } from '~/packages/orders/orders.js';
 
 import { TruckCarsQuantity } from './enums.js';
 
+const getCurrentDate = (): string => {
+  const currentDatetime = new Date();
+
+  return currentDatetime.toISOString();
+};
+
 const getCreateOrderDefaultPayload = (
   selectedTruckId: number,
 ): OrderCreateRequestDto => {
   return {
     customerName: '',
     customerPhone: '',
-    scheduledTime: '',
+    scheduledTime: getCurrentDate(),
     startPoint: '',
     endPoint: '',
     carsQty: TruckCarsQuantity.MIN,

frontend/src/pages/order/libs/components/styles.module.scss

@@ -1,30 +1,17 @@
 @import "src/assets/css/vars.scss";
 
 .formWrapper {
+  flex-grow: 1;
   width: 100%;
-  max-width: 700px;
-  height: calc(100vh - 271px);
   padding: 20px 100px 35px;
   overflow: auto;
   background-color: $white;
   border-radius: 8px;
 }
 
-.formWrapper::-webkit-scrollbar {
-  width: 0;
-}
-
-.formWrapper::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.formWrapper::-webkit-scrollbar-thumb {
-  background-color: transparent;
-  border: none;
-}
-
 .title {
   margin-bottom: 15px;
   color: $title-color;
+  font-weight: $font-weight-bold;
   font-size: 20px;
 }

frontend/src/pages/order/styles.module.scss

@@ -3,18 +3,19 @@
 .page {
   display: flex;
   height: 100%;
-  padding: 10px 18px 10px 47px;
+  padding: 10px 20px;
   overflow: hidden;
 }
 
 .left {
-  width: 35%;
-  height: inherit;
+  display: flex;
+  flex-flow: column;
+  width: 50%;
   margin-right: 15px;
 }
 
 .right {
-  width: 65%;
+  width: 50%;
   height: inherit;
   border: 5px solid $white;
   border-radius: 10px;

shared/src/packages/orders/libs/enums/orders-validation-message.enum.ts

@@ -5,6 +5,9 @@ const OrdersValidationMessage = {
   DRIVER_ID_MUST_BE_NUMBER: 'Orders driverId must be number',
   TRUCK_ID_MUST_BE_NUMBER: 'Orders truckId must be number',
   CARS_QTY_MUST_BE_NUMBER: 'Orders carsQty must be number',
+  FIELD_IS_REQUIRED: 'This field is mandatory',
+  NAME_NOT_VALID: 'Must be 1 - 40 characters, start with a letter, no digits',
+  PHONE_NOT_VALID: 'Must be 7 - 18 digits, start with +',
 } as const;
 
 export { OrdersValidationMessage };

shared/src/packages/orders/libs/validation-schemas/order-create-request-body.validation-schema.ts

@@ -3,21 +3,45 @@ import joi from 'joi';
 import { positiveRequiredIntegerSchema } from '~/libs/validation-schemas/validation-schemas.js';
 import { UserValidationRule } from '~/packages/users/libs/validation-schemas/enums/enums.js';
 
-import { OrdersValidationMessage } from '../enums/orders-validation-message.enum.js';
+import { OrdersValidationMessage as Message } from '../enums/orders-validation-message.enum.js';
 import { type OrderCreateRequestDto } from '../types/types.js';
 
 const orderCreateRequestBody = joi.object<OrderCreateRequestDto, true>({
-  scheduledTime: joi.string().isoDate().required(),
+  scheduledTime: joi.string().isoDate().required().messages({
+    'string.empty': Message.FIELD_IS_REQUIRED,
+  }),
   carsQty: positiveRequiredIntegerSchema(
-    OrdersValidationMessage.CARS_QTY_MUST_BE_NUMBER,
-  ),
-  startPoint: joi.string().required(),
-  endPoint: joi.string().required(),
+    Message.CARS_QTY_MUST_BE_NUMBER,
+  ).messages({
+    'string.empty': Message.FIELD_IS_REQUIRED,
+  }),
+  startPoint: joi.string().required().messages({
+    'string.empty': Message.FIELD_IS_REQUIRED,
+  }),
+  endPoint: joi.string().required().messages({
+    'string.empty': Message.FIELD_IS_REQUIRED,
+  }),
   truckId: positiveRequiredIntegerSchema(
-    OrdersValidationMessage.TRUCK_ID_MUST_BE_NUMBER,
-  ),
-  customerName: joi.string().pattern(UserValidationRule.NAME).allow(null),
-  customerPhone: joi.string().pattern(UserValidationRule.PHONE).allow(null),
+    Message.TRUCK_ID_MUST_BE_NUMBER,
+  ).messages({
+    'string.empty': Message.FIELD_IS_REQUIRED,
+  }),
+  customerName: joi
+    .string()
+    .pattern(UserValidationRule.NAME)
+    .allow(null)
+    .messages({
+      'string.empty': Message.FIELD_IS_REQUIRED,
+      'string.pattern.base': Message.NAME_NOT_VALID,
+    }),
+  customerPhone: joi
+    .string()
+    .pattern(UserValidationRule.PHONE)
+    .allow(null)
+    .messages({
+      'string.empty': Message.FIELD_IS_REQUIRED,
+      'string.pattern.base': Message.PHONE_NOT_VALID,
+    }),
 });
 
 export { orderCreateRequestBody };