diff --git a/src/components/proDatePicker/ProDatePicker.tsx b/src/components/ProDatePicker/ProDatePicker.tsx similarity index 84% rename from src/components/proDatePicker/ProDatePicker.tsx rename to src/components/ProDatePicker/ProDatePicker.tsx index 27d3d9e..2e1cf48 100644 --- a/src/components/proDatePicker/ProDatePicker.tsx +++ b/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, diff --git a/src/components/proDatePicker/ProTimePicker.tsx b/src/components/ProDatePicker/ProTimePicker.tsx similarity index 100% rename from src/components/proDatePicker/ProTimePicker.tsx rename to src/components/ProDatePicker/ProTimePicker.tsx diff --git a/src/features/order/orderSlice.ts b/src/features/order/orderSlice.ts index ff179d5..5b2191e 100644 --- a/src/features/order/orderSlice.ts +++ b/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) { + state.pickupDate = action.payload; + if (typeof window !== "undefined") { + localStorage.setItem( + CART_STORAGE_KEYS.PICKUP_DATE, + JSON.stringify(state.pickupDate), + ); + } + }, + updatePickupTime(state, action: PayloadAction) { + 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 diff --git a/src/pages/cart/components/timeEstimate/Content.tsx b/src/pages/cart/components/timeEstimate/Content.tsx index 8fbbb77..482f9a2 100644 --- a/src/pages/cart/components/timeEstimate/Content.tsx +++ b/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(); + const [selectedDate, setSelectedDate] = useState(Date()); const [selectedTime, setSelectedTime] = useState(); 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 (
{/* Day Selection */} @@ -104,7 +128,7 @@ export default function Content({ marginBottom: 4, }} > - {dayjs(selectedDate).format(UI_DATE_FORMAT)} + {formatDate(dayjs(selectedDate).toDate())}
diff --git a/src/pages/cart/components/timeEstimate/TimeEstimateCard.tsx b/src/pages/cart/components/timeEstimate/TimeEstimateCard.tsx index 9c6f54e..4e04201 100644 --- a/src/pages/cart/components/timeEstimate/TimeEstimateCard.tsx +++ b/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() { }} /> - {estimateWay === "later" && ( -
+ {/* {estimateWay === "later" && ( +
- )} + )} */} {isDesktop ? (