From 19250d669fcc5d2fb76d7635b1d3226e10ed61fb Mon Sep 17 00:00:00 2001
From: PhatNH4 <phatnh4@vng.com.vn>
Date: Tue, 3 Dec 2024 10:29:33 +0700
Subject: [PATCH] [ZMA-1042] fix time picker when using app after closing hour

---
 src/pages/cart/time-picker.tsx | 13 ++++++++-----
 src/utils/date.ts              | 23 ++++++++++++++++++-----
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/pages/cart/time-picker.tsx b/src/pages/cart/time-picker.tsx
index 2cd3cf5..d067ec0 100644
--- a/src/pages/cart/time-picker.tsx
+++ b/src/pages/cart/time-picker.tsx
@@ -5,6 +5,10 @@ import { displayDate, displayHalfAnHourTimeRange } from "utils/date";
 import { matchStatusBarColor } from "utils/device";
 import { Picker } from "zmp-ui";
 
+// Opening hours: 7:00 - 21:00
+const OPENING_HOUR = 7;
+const CLOSING_HOUR = 21;
+
 export const TimePicker: FC = () => {
   const [date, setDate] = useState(+new Date());
   const [time, setTime] = useRecoilState(selectedDeliveryTimeState);
@@ -12,7 +16,7 @@ export const TimePicker: FC = () => {
   const availableDates = useMemo(() => {
     const days: Date[] = [];
     const today = new Date();
-    for (let i = 0; i < 5; i++) {
+    for (let i = today.getHours() >= CLOSING_HOUR ? 1 : 0; i < 5; i++) {
       const nextDay = new Date(today);
       nextDay.setDate(today.getDate() + i);
       days.push(nextDay);
@@ -30,14 +34,13 @@ export const TimePicker: FC = () => {
       time.setHours(now.getHours());
       time.setMinutes(minutes);
     } else {
-      // Starting time is 7:00
-      time.setHours(7);
+      time.setHours(OPENING_HOUR);
       time.setMinutes(0);
     }
     time.setSeconds(0);
     time.setMilliseconds(0);
     const endTime = new Date();
-    endTime.setHours(21);
+    endTime.setHours(CLOSING_HOUR);
     endTime.setMinutes(0);
     endTime.setSeconds(0);
     endTime.setMilliseconds(0);
@@ -65,7 +68,7 @@ export const TimePicker: FC = () => {
       formatPickedValueDisplay={({ date, time }) =>
         date && time
           ? `${displayHalfAnHourTimeRange(new Date(time.value))}, ${displayDate(
-              new Date(date.value),
+              new Date(date.value)
             )}`
           : `Chọn thời gian`
       }
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 9cc8bbc..85d9899 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -1,12 +1,22 @@
-export function isToday(date: Date) {
-  const today = new Date();
+function areSameDay(date1: Date, date2: Date): boolean {
   return (
-    date.getFullYear() === today.getFullYear() &&
-    date.getMonth() === today.getMonth() &&
-    date.getDate() === today.getDate()
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate()
   );
 }
 
+export function isToday(date: Date): boolean {
+  const today = new Date();
+  return areSameDay(date, today);
+}
+
+export function isTomorrow(date: Date): boolean {
+  const tomorrow = new Date();
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  return areSameDay(date, tomorrow);
+}
+
 export function displayTime(date: Date) {
   const hours = date.getHours().toString().padStart(2, "0");
   const minutes = date.getMinutes().toString().padStart(2, "0");
@@ -26,5 +36,8 @@ export function displayDate(date: Date, hint?: boolean) {
   if (hint && isToday(date)) {
     return `Hôm nay - ${day}/${month}/${year}`;
   }
+  if (hint && isTomorrow(date)) {
+    return `Ngày mai - ${day}/${month}/${year}`;
+  }
   return `${day}/${month}/${year}`;
 }