implement scheduled order type

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)}
+      />
+    </>
+  );
+}