pick time storing and convert time to 24 hours time base

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

@@ -1,13 +1,13 @@
 import { Button, Divider } from "antd";
 import BackIcon from "components/Icons/BackIcon.tsx";
 import NextIcon from "components/Icons/NextIcon.tsx";
+import dayjs from "dayjs";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppSelector } from "redux/hooks";
 import { ProGray1 } from "ThemeConstants";
+import { SERVER_DATE_FORMAT } from "utils/constants.ts";
 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",
@@ -25,21 +25,24 @@ const timeSlots = [
 ];
 interface EstimateTimeContentProps {
   onSave: (date: string, time: string) => void;
-
   onClose: () => void;
 }
 
-export default function Content({
-  onSave,
-
-  onClose,
-}: EstimateTimeContentProps) {
+export default function Content({ onSave, onClose }: EstimateTimeContentProps) {
   const { t } = useTranslation();
-  const [selectedDate, setSelectedDate] = useState<string>();
+  const [selectedDate, setSelectedDate] = useState<string>(Date());
   const [selectedTime, setSelectedTime] = useState<string>();
   const [isAM, setIsAM] = useState(true);
   const { isRTL } = useAppSelector((state) => state.locale);
 
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString("en-US", {
+      weekday: "long",
+      month: "short",
+      day: "numeric",
+    });
+  };
+
   const goToPreviousDay = () => {
     const newDate = dayjs(selectedDate).subtract(1, "d");
     setSelectedDate(newDate.format(SERVER_DATE_FORMAT));
@@ -55,11 +58,32 @@ export default function Content({
   };
 
   const handleSave = () => {
-    console.log(selectedTime);
-    onSave(selectedDate || "", `${selectedTime} ${isAM ? "AM" : "PM"}`);
+    onSave(
+      dayjs(selectedDate).format(SERVER_DATE_FORMAT),
+      formatSelectedTime(selectedTime, isAM),
+    );
     onClose();
   };
 
+  // covert from 12 to 24 hours system
+  const formatSelectedTime = (time: string | undefined, am: boolean) => {
+    const fallback = "12:00";
+    if (!time) return fallback;
+
+    if (am) {
+      return time === "12:00" ? "00:00" : time.padStart(5, "0");
+    }
+
+    const [rawHour, minute = "00"] = time.split(":");
+    const hour = Number(rawHour);
+    if (Number.isNaN(hour)) {
+      return fallback;
+    }
+
+    const convertedHour = hour === 12 ? 12 : hour + 12;
+    return `${convertedHour.toString().padStart(2, "0")}:${minute}`;
+  };
+
   return (
     <div style={{ padding: "0 20px", marginTop: 30 }}>
       {/* Day Selection */}
@@ -104,7 +128,7 @@ export default function Content({
                 marginBottom: 4,
               }}
             >
-              {dayjs(selectedDate).format(UI_DATE_FORMAT)}
+              {formatDate(dayjs(selectedDate).toDate())}
             </div>
           </div>
 

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

@@ -1,18 +1,19 @@
 import { Form } from "antd";
+import useFormInstance from "antd/es/form/hooks/useFormInstance";
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
 import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups.tsx";
+import dayjs from "dayjs";
+import { updatePickupDate, updatePickupTime } from "features/order/orderSlice";
 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 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";
+import { useAppDispatch } from "redux/hooks";
+import { SERVER_DATE_FORMAT, UI_TIME_FORMAT } from "utils/constants.ts";
 
 export default function TimeEstimateCard() {
+  const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const form = useFormInstance();
   const { isDesktop } = useBreakPoint();
@@ -20,9 +21,9 @@ export default function TimeEstimateCard() {
   const [isEstimateTimeOpen, setIsEstimateTimeOpen] = useState(false);
 
   const handleEstimateTimeSave = (date: string, time: string) => {
-    console.log(time);
-
     form.setFieldsValue({ pickupTime: time, pickupDate: date });
+    dispatch(updatePickupTime(time));
+    dispatch(updatePickupDate(date));
   };
 
   const handleEstimateTimeClose = () => {
@@ -50,7 +51,7 @@ export default function TimeEstimateCard() {
                 setEstimateWay(value);
                 handleEstimateTimeSave(
                   dayjs().format(SERVER_DATE_FORMAT),
-                  "now",
+                  dayjs().format(UI_TIME_FORMAT),
                 );
               } else {
                 setEstimateWay(value);
@@ -59,8 +60,14 @@ export default function TimeEstimateCard() {
             }}
           />
         </Form.Item>
-        {estimateWay === "later" && (
-          <div style={{ display: "flex", gap: "15px" }}>
+        {/* {estimateWay === "later" && (
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              gap: "15px",
+            }}
+          >
             <ProDateFormInput
               pickerProps={{
                 size: "middle",
@@ -87,7 +94,7 @@ export default function TimeEstimateCard() {
               formItemProps={{ name: "pickupTime" }}
             />
           </div>
-        )}
+        )} */}
       </ProInputCard>
       {isDesktop ? (
         <Dialog