diff --git a/src/pages/cart/components/CartMobileTabletLayout.tsx b/src/pages/cart/components/CartMobileTabletLayout.tsx index 1971e3a..b9a02bf 100644 --- a/src/pages/cart/components/CartMobileTabletLayout.tsx +++ b/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) && } - {orderType === OrderType.ScheduledOrder && } - {/* Collection Method */} {orderType === OrderType.Pickup && ( diff --git a/src/pages/cart/components/timeEstimate/BottomSheet.tsx b/src/pages/cart/components/timeEstimate/BottomSheet.tsx index 5600890..bc44275 100644 --- a/src/pages/cart/components/timeEstimate/BottomSheet.tsx +++ b/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; - initialDate?: Date; + onSave: (date: string, time: string) => void; } export function BottomSheet({ isOpen, onClose, onSave, - initialDate = new Date(), }: EstimateTimeBottomSheetProps) { const { t } = useTranslation(); @@ -27,7 +25,7 @@ export function BottomSheet({ height={555} snapPoints={["65vh"]} > - + ); } diff --git a/src/pages/cart/components/timeEstimate/Content.tsx b/src/pages/cart/components/timeEstimate/Content.tsx index 1b66baa..8fbbb77 100644 --- a/src/pages/cart/components/timeEstimate/Content.tsx +++ b/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; - initialDate: Date; + onSave: (date: string, time: string) => void; + onClose: () => void; } export default function Content({ onSave, - initialDate, + onClose, }: EstimateTimeContentProps) { const { t } = useTranslation(); - const [selectedDate, setSelectedDate] = useState(initialDate); - const [selectedTime, setSelectedTime] = useState("12:00"); + const [selectedDate, setSelectedDate] = useState(); + const [selectedTime, setSelectedTime] = useState(); 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); - newDate.setDate(newDate.getDate() - 1); - setSelectedDate(newDate); + const newDate = dayjs(selectedDate).subtract(1, "d"); + setSelectedDate(newDate.format(SERVER_DATE_FORMAT)); }; const goToNextDay = () => { - const newDate = new Date(selectedDate); - newDate.setDate(newDate.getDate() + 1); - setSelectedDate(newDate); + const newDate = dayjs(selectedDate).add(1, "d"); + setSelectedDate(newDate.format(SERVER_DATE_FORMAT)); }; const handleTimeSelect = (time: string) => { @@ -67,16 +55,8 @@ export default function Content({ }; const handleSave = () => { - const [hours, minutes] = selectedTime.split(":"); - const date = new Date(selectedDate); - date.setHours( - isAM ? parseInt(hours) : parseInt(hours) + 12, - parseInt(minutes), - 0, - 0, - ); - - onSave(date, `${selectedTime} ${isAM ? "AM" : "PM"}`); + console.log(selectedTime); + onSave(selectedDate || "", `${selectedTime} ${isAM ? "AM" : "PM"}`); onClose(); }; @@ -124,7 +104,7 @@ export default function Content({ marginBottom: 4, }} > - {formatDate(selectedDate)} + {dayjs(selectedDate).format(UI_DATE_FORMAT)} diff --git a/src/pages/cart/components/timeEstimate/Dialog.tsx b/src/pages/cart/components/timeEstimate/Dialog.tsx index 43bda2f..45ab9c9 100644 --- a/src/pages/cart/components/timeEstimate/Dialog.tsx +++ b/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; - initialDate?: Date; + onSave: (date: string, time: string) => void; } -export function Dialog({ - isOpen, - onClose, - onSave, - initialDate = new Date(), -}: EstimateTimeDialogProps) { +export function Dialog({ isOpen, onClose, onSave }: EstimateTimeDialogProps) { const { t } = useTranslation(); return ( @@ -27,7 +21,7 @@ export function Dialog({ width={500} destroyOnHidden > - + ); } diff --git a/src/pages/cart/components/timeEstimate/TimeEstimateCard.tsx b/src/pages/cart/components/timeEstimate/TimeEstimateCard.tsx index 59f90e3..9c6f54e 100644 --- a/src/pages/cart/components/timeEstimate/TimeEstimateCard.tsx +++ b/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 { estimateTimeDate } = useAppSelector(selectCart); + const form = useFormInstance(); const { isDesktop } = useBreakPoint(); const [estimateWay, setEstimateWay] = useState("now"); const [isEstimateTimeOpen, setIsEstimateTimeOpen] = useState(false); - const handleEstimateTimeSave = (date: Date, time: string) => { - dispatch(updateEstimateTime({ date, time })); + const handleEstimateTimeSave = (date: string, time: string) => { + 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() { }} /> + {estimateWay === "later" && ( +
+ { + e.preventDefault(); + e.stopPropagation(); + setIsEstimateTimeOpen(true); + }, + }} + formItemProps={{ name: "pickupDate" }} + /> + + { + e.preventDefault(); + e.stopPropagation(); + setIsEstimateTimeOpen(true); + }, + }} + formItemProps={{ name: "pickupTime" }} + /> +
+ )}
{isDesktop ? ( ) : ( )} diff --git a/src/utils/constants.ts b/src/utils/constants.ts index bcfda00..557930c 100644 --- a/src/utils/constants.ts +++ b/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 = "";