implement scheduled order type

src/pages/cart/components/CarPlateCard.tsx

@@ -1,4 +1,4 @@
-import { Input } from "antd";
+import { Form, Input } from "antd";
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
 import { useTranslation } from "react-i18next";
 
@@ -6,13 +6,18 @@ export default function CarPlateCard() {
   const { t } = useTranslation();
   return (
     <>
-      <ProInputCard title={t("cart.plateNumber")}>
-        <Input
-          placeholder={t("plateNumber")}
-          size="large"
-          autoFocus={false}
-          style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
-        />
+      <ProInputCard
+        title={t("cart.plateNumber")}
+        dividerStyle={{ margin: "5px 0 0 0" }}
+      >
+        <Form.Item label={t("cart.plateNumber")} name="plateNumber" style={{position:"relative", top: -5}}>
+          <Input
+            placeholder={t("cart.plateNumber")}
+            size="large"
+            autoFocus={false}
+            style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
+          />
+        </Form.Item>
       </ProInputCard>
     </>
   );

src/pages/cart/components/CartMobileTabletLayout.tsx

@@ -25,12 +25,13 @@ 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";
 import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard.tsx";
-import { useTranslation } from "react-i18next";
 import { OrderType } from "pages/checkout/hooks/types";
+import { useTranslation } from "react-i18next";
 
 interface CartMobileTabletLayoutProps {
   form: FormInstance;
@@ -58,6 +59,7 @@ export default function CartMobileTabletLayout({
       height: 120,
     };
   };
+
   return (
     <>
       <ProHeader>{t("cart.title")}</ProHeader>
@@ -225,11 +227,15 @@ export default function CartMobileTabletLayout({
           <CouponCard />
 
           {/* Car Plate*/}
-          {orderType === OrderType.Pickup && <CarPlateCard />}
+          {(orderType === OrderType.Pickup ||
+            orderType === OrderType.ScheduledOrder) && <CarPlateCard />}
 
           {/* Estimate Time */}
           {(orderType === OrderType.Delivery ||
-            orderType === OrderType.Pickup) && <TimeEstimateCard />}
+            orderType === OrderType.Pickup ||
+            orderType === OrderType.ScheduledOrder) && <TimeEstimateCard />}
+
+          {orderType === OrderType.ScheduledOrder && <DateCard form={form} />}
 
           {/* Collection Method */}
           {orderType === OrderType.Pickup && (

src/pages/cart/components/CouponCard.tsx

@@ -1,20 +1,19 @@
+import { Button, Form, Input, message } from "antd";
 import { CouponBottomSheet } from "components/CustomBottomSheet/CouponBottomSheet.tsx";
-import { useAppSelector, useAppDispatch } from "redux/hooks.ts";
-import { selectCart, updateCoupon } from "features/order/orderSlice.ts";
-import { useState } from "react";
-import { message, Input, Button } from "antd";
-import { useTranslation } from "react-i18next";
+import { CouponDialog } from "components/CustomBottomSheet/CouponDialog.tsx";
+import CouponHeartIcon from "components/Icons/cart/CouponHeart.tsx";
+import DonateIcon from "components/Icons/cart/DonateIcon.tsx";
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
 import ProText from "components/ProText.tsx";
-import { colors } from "ThemeConstants.ts";
-import DonateIcon from "components/Icons/cart/DonateIcon.tsx";
-import CouponHeartIcon from "components/Icons/cart/CouponHeart.tsx";
-import styles from "pages/cart/cart.module.css";
-import { CouponDialog } from "components/CustomBottomSheet/CouponDialog.tsx";
+import { selectCart, updateCoupon } from "features/order/orderSlice.ts";
 import useBreakPoint from "hooks/useBreakPoint.ts";
+import styles from "pages/cart/cart.module.css";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
+import { colors } from "ThemeConstants.ts";
 
-type Props = {};
-export default function CouponCard({}: Props) {
+export default function CouponCard() {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const { coupon } = useAppSelector(selectCart);
@@ -57,27 +56,34 @@ export default function CouponCard({}: Props) {
             <DonateIcon />
           </div>
         }
+        dividerStyle={{ margin: "5px 0 0 0" }}
       >
-        <Input
-          placeholder={t("cart.couponCode")}
-          size="large"
-          autoFocus={false}
-          style={{ padding: "7px 11px", height: 50 }}
-          suffix={
-            <Button
-              style={{
-                width: 100,
-                height: 32,
-                borderRadius: 100,
-                backgroundColor: "black",
-                color: "white",
-              }}
-            >
-              {t("cart.apply")}
-              <CouponHeartIcon className={styles.couponApplyIcon} />
-            </Button>
-          }
-        />
+        <Form.Item
+          label={t("cart.couponCode")}
+          name="coupon"
+          style={{ position: "relative", top: -5 }}
+        >
+          <Input
+            placeholder={t("cart.couponCode")}
+            size="large"
+            autoFocus={false}
+            style={{ padding: "7px 11px", height: 50 }}
+            suffix={
+              <Button
+                style={{
+                  width: 100,
+                  height: 32,
+                  borderRadius: 100,
+                  backgroundColor: "black",
+                  color: "white",
+                }}
+              >
+                {t("cart.apply")}
+                <CouponHeartIcon className={styles.couponApplyIcon} />
+              </Button>
+            }
+          />
+        </Form.Item>
       </ProInputCard>
       {isDesktop ? (
         <CouponDialog

src/pages/cart/components/DateCard.tsx

@@ -0,0 +1,56 @@
+import { Form, FormInstance, Input } from "antd";
+import DatePickerBottomSheet from "components/CustomBottomSheet/DatePickerBottomSheet";
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import { selectCart, updateScheduledDate } from "features/order/orderSlice";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+
+export default function DateCard({ form }: { form: FormInstance }) {
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+  const { scheduledDate } = useAppSelector(selectCart);
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <ProInputCard
+        title={t("cart.scheduledDate")}
+        dividerStyle={{ margin: "5px 0 0 0" }}
+      >
+        <Form.Item
+          label={t("cart.scheduledDate")}
+          name="date"
+          required
+          rules={[{ required: true }]}
+          style={{position:"relative", top: -5}}
+        >
+          <Input
+            placeholder={t("cart.scheduledDate")}
+            size="large"
+            onClick={() => setIsOpen(true)}
+            readOnly
+            value={scheduledDate}
+            style={{
+              cursor: "pointer",
+              height: 50,
+              fontSize: 14,
+              borderRadius: 888,
+            }}
+          />
+        </Form.Item>
+      </ProInputCard>
+
+      <DatePickerBottomSheet
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        onDateSelect={(date) => {
+          const formattedDate = `${date.month}/${date.day}/${date.year}`;
+          dispatch(updateScheduledDate(formattedDate));
+          form.setFieldValue("date", formattedDate);
+        }}
+        initialDate={new Date(1990, 0, 1)}
+      />
+    </>
+  );
+}

src/pages/cart/components/TableNumberCard.tsx

@@ -26,12 +26,15 @@ export default function TableNumberCard() {
       <ProInputCard
         title={t("cart.tableNumber")}
         className={styles.tableNumberCard}
+        dividerStyle={{ margin: "5px 0 0 0" }}
       >
         <Form.Item
+          label={t("cart.tableNumber")}
           name="tables"
           required
           rules={[{ required: true, message: t("cart.pleaseSelectTable") }]}
           initialValue={tables}
+          style={{ position: "relative", top: -5 }}
         >
           <Select
             value={tables}

src/pages/cart/components/specialRequest/SpecialRequestCard.tsx

@@ -1,5 +1,5 @@
 import { RightOutlined } from "@ant-design/icons";
-import { Input } from "antd";
+import { Form, Input } from "antd";
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
 import { selectCart, updateSpecialRequest } from "features/order/orderSlice.ts";
 import useBreakPoint from "hooks/useBreakPoint.ts";
@@ -27,22 +27,31 @@ export default function SpecialRequestCard() {
   };
   return (
     <>
-      <ProInputCard title={t("cart.specialRequest")}>
-        <Input
-          value={specialRequest}
-          placeholder={t("cart.specialRequest")}
-          size="large"
-          autoFocus={false}
-          className={styles.inputField}
-          suffix={
-            <div
-              className={styles.editButton}
-              onClick={() => setIsSpecialRequestOpen(true)}
-            >
-              <u>{t("cart.editNote")}</u> <RightOutlined />
-            </div>
-          }
-        />
+      <ProInputCard
+        title={t("cart.specialRequest")}
+        dividerStyle={{ margin: "5px 0 0 0" }}
+      >
+        <Form.Item
+          label={t("cart.specialRequest")}
+          name="specialRequest"
+          style={{ position: "relative", top: -5 }}
+        >
+          <Input
+            value={specialRequest}
+            placeholder={t("cart.specialRequest")}
+            size="large"
+            autoFocus={false}
+            className={styles.inputField}
+            suffix={
+              <div
+                className={styles.editButton}
+                onClick={() => setIsSpecialRequestOpen(true)}
+              >
+                <u>{t("cart.editNote")}</u> <RightOutlined />
+              </div>
+            }
+          />
+        </Form.Item>
       </ProInputCard>
       {isDesktop ? (
         <Dialog

src/pages/cart/page.tsx

@@ -8,7 +8,7 @@ import CartMobileTabletLayout from "pages/cart/components/CartMobileTabletLayout
 export default function CartPage() {
   const { isDesktop } = useBreakPoint();
   const [form] = Form.useForm();
-  
+
   // Prevent keyboard from appearing automatically on mobile
   useEffect(() => {
     // Blur any focused element when component mounts
@@ -28,7 +28,7 @@ export default function CartPage() {
   // Enhanced desktop layout
   if (isDesktop) {
     return (
-      <Form form={form}>
+      <Form form={form} layout="vertical">
         <CartDesktopLayout form={form} />
       </Form>
     );
@@ -36,7 +36,7 @@ export default function CartPage() {
 
   // Mobile/Tablet Layout (existing code)
   return (
-    <Form form={form}>
+    <Form form={form} layout="vertical">
       <CartMobileTabletLayout form={form} />
     </Form>
   );