Time estimate card: fix date values

src/pages/cart/components/CartMobileTabletLayout.tsx

@@ -25,7 +25,6 @@ import useBreakPoint from "hooks/useBreakPoint.ts";
 import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
 import CartFooter from "pages/cart/components/cartFooter/CartFooter.tsx";
 import CouponCard from "pages/cart/components/CouponCard.tsx";
-import DateCard from "pages/cart/components/DateCard.tsx";
 import RewardWaiterCard from "pages/cart/components/RewardWaiterCard.tsx";
 import SpecialRequestCard from "pages/cart/components/specialRequest/SpecialRequestCard.tsx";
 import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
@@ -246,8 +245,6 @@ export default function CartMobileTabletLayout({
             orderType === OrderType.Pickup ||
             orderType === OrderType.ScheduledOrder) && <TimeEstimateCard />}
 
-          {orderType === OrderType.ScheduledOrder && <DateCard form={form} />}
-
           {/* Collection Method */}
           {orderType === OrderType.Pickup && (
             <ProInputCard title={t("cart.collectionMethod")}>

src/pages/cart/components/timeEstimate/BottomSheet.tsx

@@ -5,15 +5,13 @@ import { useTranslation } from "react-i18next";
 interface EstimateTimeBottomSheetProps {
   isOpen: boolean;
   onClose: () => void;
-  onSave: (date: Date, time: string) => void;
+  onSave: (date: string, time: string) => void;
-  initialDate?: Date;
 }
 
 export function BottomSheet({
   isOpen,
   onClose,
   onSave,
-  initialDate = new Date(),
 }: EstimateTimeBottomSheetProps) {
   const { t } = useTranslation();
 
@@ -27,7 +25,7 @@ export function BottomSheet({
       height={555}
       snapPoints={["65vh"]}
     >
-      <Content onSave={onSave} initialDate={initialDate} onClose={onClose} />
+      <Content onSave={onSave} onClose={onClose} />
     </ProBottomSheet>
   );
 }

src/pages/cart/components/timeEstimate/Content.tsx

@@ -1,11 +1,13 @@
 import { Button, Divider } from "antd";
 import BackIcon from "components/Icons/BackIcon.tsx";
 import NextIcon from "components/Icons/NextIcon.tsx";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppSelector } from "redux/hooks";
 import { ProGray1 } from "ThemeConstants";
 import styles from "./TimeEstimateCard.module.css";
+import dayjs from "dayjs";
+import { SERVER_DATE_FORMAT, UI_DATE_FORMAT } from "utils/constants.ts";
 
 const timeSlots = [
   "12:00",
@@ -22,44 +24,30 @@ const timeSlots = [
   "11:00",
 ];
 interface EstimateTimeContentProps {
-  onSave: (date: Date, time: string) => void;
+  onSave: (date: string, time: string) => void;
-  initialDate: Date;
+
   onClose: () => void;
 }
 
 export default function Content({
   onSave,
-  initialDate,
+
   onClose,
 }: EstimateTimeContentProps) {
   const { t } = useTranslation();
-  const [selectedDate, setSelectedDate] = useState(initialDate);
+  const [selectedDate, setSelectedDate] = useState<string>();
-  const [selectedTime, setSelectedTime] = useState("12:00");
+  const [selectedTime, setSelectedTime] = useState<string>();
   const [isAM, setIsAM] = useState(true);
   const { isRTL } = useAppSelector((state) => state.locale);
 
-  useEffect(() => {
-    setSelectedDate(initialDate);
-  }, [initialDate]);
-
-  const formatDate = (date: Date) => {
-    return date.toLocaleDateString("en-US", {
-      weekday: "long",
-      month: "short",
-      day: "numeric",
-    });
-  };
-
   const goToPreviousDay = () => {
-    const newDate = new Date(selectedDate);
+    const newDate = dayjs(selectedDate).subtract(1, "d");
-    newDate.setDate(newDate.getDate() - 1);
+    setSelectedDate(newDate.format(SERVER_DATE_FORMAT));
-    setSelectedDate(newDate);
   };
 
   const goToNextDay = () => {
-    const newDate = new Date(selectedDate);
+    const newDate = dayjs(selectedDate).add(1, "d");
-    newDate.setDate(newDate.getDate() + 1);
+    setSelectedDate(newDate.format(SERVER_DATE_FORMAT));
-    setSelectedDate(newDate);
   };
 
   const handleTimeSelect = (time: string) => {
@@ -67,16 +55,8 @@ export default function Content({
   };
 
   const handleSave = () => {
-    const [hours, minutes] = selectedTime.split(":");
+    console.log(selectedTime);
-    const date = new Date(selectedDate);
+    onSave(selectedDate || "", `${selectedTime} ${isAM ? "AM" : "PM"}`);
-    date.setHours(
-      isAM ? parseInt(hours) : parseInt(hours) + 12,
-      parseInt(minutes),
-      0,
-      0,
-    );
-
-    onSave(date, `${selectedTime} ${isAM ? "AM" : "PM"}`);
     onClose();
   };
 
@@ -124,7 +104,7 @@ export default function Content({
                 marginBottom: 4,
               }}
             >
-              {formatDate(selectedDate)}
+              {dayjs(selectedDate).format(UI_DATE_FORMAT)}
             </div>
           </div>
 

src/pages/cart/components/timeEstimate/Dialog.tsx

@@ -6,16 +6,10 @@ import Content from "pages/cart/components/timeEstimate/Content.tsx";
 interface EstimateTimeDialogProps {
   isOpen: boolean;
   onClose: () => void;
-  onSave: (date: Date, time: string) => void;
+  onSave: (date: string, time: string) => void;
-  initialDate?: Date;
 }
 
-export function Dialog({
+export function Dialog({ isOpen, onClose, onSave }: EstimateTimeDialogProps) {
-  isOpen,
-  onClose,
-  onSave,
-  initialDate = new Date(),
-}: EstimateTimeDialogProps) {
   const { t } = useTranslation();
 
   return (
@@ -27,7 +21,7 @@ export function Dialog({
       width={500}
       destroyOnHidden
     >
-      <Content onSave={onSave} initialDate={initialDate} onClose={onClose} />
+      <Content onSave={onSave} onClose={onClose} />
     </Modal>
   );
 }

src/pages/cart/components/timeEstimate/TimeEstimateCard.tsx

@@ -1,24 +1,28 @@
 import { Form } from "antd";
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
 import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups.tsx";
-import { selectCart, updateEstimateTime } from "features/order/orderSlice.ts";
 import useBreakPoint from "hooks/useBreakPoint.ts";
 import { BottomSheet } from "pages/cart/components/timeEstimate/BottomSheet.tsx";
 import { Dialog } from "pages/cart/components/timeEstimate/Dialog.tsx";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
+import useFormInstance from "antd/es/form/hooks/useFormInstance";
+import ProDateFormInput from "components/proDatePicker/ProDatePicker.tsx";
+import dayjs from "dayjs";
+import { SERVER_DATE_FORMAT } from "utils/constants.ts";
+import TimeFormInput from "components/proDatePicker/ProTimePicker.tsx";
 
 export default function TimeEstimateCard() {
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
+  const form = useFormInstance();
-  const { estimateTimeDate } = useAppSelector(selectCart);
   const { isDesktop } = useBreakPoint();
   const [estimateWay, setEstimateWay] = useState("now");
   const [isEstimateTimeOpen, setIsEstimateTimeOpen] = useState(false);
 
-  const handleEstimateTimeSave = (date: Date, time: string) => {
+  const handleEstimateTimeSave = (date: string, time: string) => {
-    dispatch(updateEstimateTime({ date, time }));
+    console.log(time);
+
+    form.setFieldsValue({ pickupTime: time, pickupDate: date });
   };
 
   const handleEstimateTimeClose = () => {
@@ -44,7 +48,10 @@ export default function TimeEstimateCard() {
             onRatioClick={(value) => {
               if (value === "now") {
                 setEstimateWay(value);
-                handleEstimateTimeSave(new Date(), "now");
+                handleEstimateTimeSave(
+                  dayjs().format(SERVER_DATE_FORMAT),
+                  "now",
+                );
               } else {
                 setEstimateWay(value);
                 setIsEstimateTimeOpen(true);
@@ -52,19 +59,46 @@ export default function TimeEstimateCard() {
             }}
           />
         </Form.Item>
+        {estimateWay === "later" && (
+          <div style={{ display: "flex", gap: "15px" }}>
+            <ProDateFormInput
+              pickerProps={{
+                size: "middle",
+                open: false,
+                onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setIsEstimateTimeOpen(true);
+                },
+              }}
+              formItemProps={{ name: "pickupDate" }}
+            />
+
+            <TimeFormInput
+              pickerProps={{
+                size: "middle",
+                open: false,
+                onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setIsEstimateTimeOpen(true);
+                },
+              }}
+              formItemProps={{ name: "pickupTime" }}
+            />
+          </div>
+        )}
       </ProInputCard>
       {isDesktop ? (
         <Dialog
           isOpen={isEstimateTimeOpen}
           onClose={handleEstimateTimeClose}
-          initialDate={estimateTimeDate}
           onSave={handleEstimateTimeSave}
         />
       ) : (
         <BottomSheet
           isOpen={isEstimateTimeOpen}
           onClose={handleEstimateTimeClose}
-          initialDate={estimateTimeDate}
           onSave={handleEstimateTimeSave}
         />
       )}

src/utils/constants.ts

@@ -49,7 +49,7 @@ export const DEFAULT_LANGUAGE = "selectedLang";
 
 export const SERVER_DATE_FORMAT = "YYYY-MM-DD";
 export const UI_DATE_FORMAT = "YYYY/MM/DD";
-export const UI_TIME_FORMAT = "HH:mm";
+export const UI_TIME_FORMAT = "h:mm A";
 
 export const CONTACTS_URL = "LT";
 export const FILTER_PARAMS = "";