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 = "";