From 05e98b7afe06e282d9fdead088e57cc40660e6ec Mon Sep 17 00:00:00 2001
From: RustamRu <kagapov.rustam@gmail.com>
Date: Thu, 20 Mar 2025 11:54:25 +0300
Subject: [PATCH] feat: limit datetimes select to one day

---
 .../order-form/form/date-time/helper.ts       | 26 +++++++++++++++++++
 .../order-form/form/date-time/index.ts        |  3 ++-
 src/components/order-form/form/order-form.tsx | 17 ++++++++++--
 3 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 src/components/order-form/form/date-time/helper.ts

diff --git a/src/components/order-form/form/date-time/helper.ts b/src/components/order-form/form/date-time/helper.ts
new file mode 100644
index 0000000..e4fbfe1
--- /dev/null
+++ b/src/components/order-form/form/date-time/helper.ts
@@ -0,0 +1,26 @@
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+dayjs.extend(customParseFormat);
+
+export const getMinDatetime = (dateTimeString: string, minDateTimeString: string) => {
+  const time = dayjs(dateTimeString);
+
+  const minDate = dayjs(minDateTimeString).format('YYYY-MM-DD');
+  const minTime = dayjs(minDateTimeString);
+
+  const newTime = (time && time.isAfter(minTime)) ? time : minTime;
+
+  return [minDate, newTime.format('HH:mm')].join('T');
+};
+
+export const getMaxDatetime = (dateTimeString: string, maxDateTimeString: string) => {
+  const time = dayjs(dateTimeString);
+
+  const maxDate = dayjs(maxDateTimeString).format('YYYY-MM-DD');
+  const maxTime = dayjs(maxDateTimeString);
+
+  const newTime = (time && time.isBefore(maxTime)) ? time : maxTime;
+
+  return [maxDate, newTime.format('HH:mm')].join('T');
+};
\ No newline at end of file
diff --git a/src/components/order-form/form/date-time/index.ts b/src/components/order-form/form/date-time/index.ts
index 08f8dc6..27e0949 100644
--- a/src/components/order-form/form/date-time/index.ts
+++ b/src/components/order-form/form/date-time/index.ts
@@ -1 +1,2 @@
-export { type DateTimeInputProps, DateTimeInput } from './date-time';
\ No newline at end of file
+export { type DateTimeInputProps, DateTimeInput } from './date-time';
+export { getMinDatetime, getMaxDatetime } from './helper';
\ No newline at end of file
diff --git a/src/components/order-form/form/order-form.tsx b/src/components/order-form/form/order-form.tsx
index d429d5c..d8c82f0 100644
--- a/src/components/order-form/form/order-form.tsx
+++ b/src/components/order-form/form/order-form.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { Box, Flex, FormControl, FormLabel, VStack } from '@chakra-ui/react';
@@ -10,7 +10,7 @@ import { OrderFormProps, OrderFormValues } from './types';
 import { PhoneInput } from './phone';
 import { SubmitButton } from './submit';
 import { defaultValues, useGetValidationRules } from './helper';
-import { DateTimeInput } from './date-time';
+import { DateTimeInput, getMinDatetime, getMaxDatetime } from './date-time';
 import {
   LocationInput,
   MapComponent,
@@ -40,6 +40,19 @@ export const OrderForm = ({ onSubmit, loading, ...props }: OrderFormProps) => {
     'carLocation',
   ]);
 
+  useEffect(() => {
+    if (!availableDatetimeBegin) {
+      return;
+    }
+    setValue('availableDatetimeEnd', getMinDatetime(availableDatetimeEnd, availableDatetimeBegin));
+  }, [availableDatetimeBegin]);
+  useEffect(() => {
+    if (!availableDatetimeEnd) {
+      return;
+    }
+    setValue('availableDatetimeBegin', getMaxDatetime(availableDatetimeBegin, availableDatetimeEnd));
+  }, [availableDatetimeEnd]);
+
   return (
     <Box p={4} marginInline='auto' {...props}>
       <VStack