Merge pull request #6 from Zalo-MiniApp/hotfix/time-picker-closing-hour

[ZMA-1042] Fix time picker when using the app after closing hour
Zalo-MiniApp · Dec 3, 2024 · a99b67a · a99b67a
2 parents b1a7bad + 19250d6
commit a99b67a
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/src/pages/cart/time-picker.tsx b/src/pages/cart/time-picker.tsx
@@ -5,14 +5,18 @@ 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);
 
   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
@@ -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}`;
 }