pick time storing and convert time to 24 hours time base

src/components/ProDatePicker/ProDatePicker.tsx

@@ -1,8 +1,8 @@
-import { FormItemProps, Form, DatePicker } from "antd";
+import { DatePicker, Form, FormItemProps } from "antd";
 import dayjs from "dayjs";
 
 import type { DatePickerProps } from "antd";
-import { UI_DATE_FORMAT, SERVER_DATE_FORMAT } from "utils/constants.ts";
+import { SERVER_DATE_FORMAT, UI_DATE_FORMAT } from "utils/constants.ts";
 
 export default function ProDateFormInput({
   formItemProps,

src/features/order/orderSlice.ts

@@ -65,6 +65,8 @@ interface CartState {
   scheduledDate: string;
   discount: DiscountData;
   plateCar: string;
+  pickupDate: string,
+  pickupTime: string
 }
 
 // localStorage keys
@@ -91,6 +93,8 @@ export const CART_STORAGE_KEYS = {
   SCHEDULED_DATE: "fascano_scheduled_date",
   DISCOUNT: "fascano_discount",
   PLATE: "fascano_plate_car",
+  PICKUP_DATE: "fascano_pickup_date",
+  PICKUP_TIME: "fascano_pickup_time",
 } as const; 
 
 // Utility functions for localStorage
@@ -173,6 +177,8 @@ const initialState: CartState = {
     isDiscount: false,
   }),
   plateCar: getFromLocalStorage(CART_STORAGE_KEYS.PLATE, ""),
+  pickupDate: getFromLocalStorage(CART_STORAGE_KEYS.PICKUP_DATE, ""),
+  pickupTime: getFromLocalStorage(CART_STORAGE_KEYS.PICKUP_TIME, ""),
 };
 
 const orderSlice = createSlice({
@@ -587,6 +593,24 @@ const orderSlice = createSlice({
         );
       }
     },
+    updatePickupDate(state, action: PayloadAction<string>) {
+      state.pickupDate = action.payload;
+      if (typeof window !== "undefined") {
+        localStorage.setItem(
+          CART_STORAGE_KEYS.PICKUP_DATE,
+          JSON.stringify(state.pickupDate),
+        );
+      }
+    },
+    updatePickupTime(state, action: PayloadAction<string>) {
+      state.pickupTime = action.payload;
+      if (typeof window !== "undefined") {
+        localStorage.setItem(
+          CART_STORAGE_KEYS.PICKUP_TIME,
+          JSON.stringify(state.pickupTime),
+        );
+      }
+      },
   },
 });
 
@@ -620,6 +644,8 @@ export const {
   updateRestaurant,
   updateScheduledDate,
   updateDiscount,
+  updatePickupDate,
+  updatePickupTime,
 } = orderSlice.actions;
 
 // Tax calculation helper functions

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({
+export default function Content({ onSave, onClose }: EstimateTimeContentProps) {
-  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(
-    onSave(selectedDate || "", `${selectedTime} ${isAM ? "AM" : "PM"}`);
+      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 { useAppDispatch } from "redux/hooks";
-import ProDateFormInput from "components/proDatePicker/ProDatePicker.tsx";
+import { SERVER_DATE_FORMAT, UI_TIME_FORMAT } from "utils/constants.ts";
-import dayjs from "dayjs";
-import { SERVER_DATE_FORMAT } from "utils/constants.ts";
-import TimeFormInput from "components/proDatePicker/ProTimePicker.tsx";
 
 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" && (
+        {/* {estimateWay === "later" && (
-          <div style={{ display: "flex", gap: "15px" }}>
+          <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

src/pages/checkout/hooks/useOrder.ts

@@ -37,6 +37,8 @@ export default function useOrder() {
     location,
     discount,
     plateCar,
+    pickupTime,
+    pickupDate,
   } = useAppSelector(selectCart);
   const highestLoyaltyItem = useAppSelector(selectHighestPricedLoyaltyItem);
   const { useLoyaltyPoints } = useAppSelector(selectCart);
@@ -83,7 +85,8 @@ export default function useOrder() {
       paymentType: "cod",
       uuid: user_uuid,
       pickup_comments: "",
-      pickup_time: estimateTime,
+      pickup_time: pickupTime,
+      pickup_date: pickupDate,
       car_plate: plateCar,
       delivery_pickup_interval: "",
       orderPrice: orderPrice,

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 = "h:mm A";
+export const UI_TIME_FORMAT = "h:mm";
 
 export const CONTACTS_URL = "LT";
 export const FILTER_PARAMS = "";