Time estimate card: fix date values

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() {
             }}
           />
         </Form.Item>
+        {estimateWay === "later" && (
+          <div style={{ display: "flex", gap: "15px" }}>
+            <ProDateFormInput
+              pickerProps={{
+                size: "middle",
+                open: false,
+                onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setIsEstimateTimeOpen(true);
+                },
+              }}
+              formItemProps={{ name: "pickupDate" }}
+            />
+
+            <TimeFormInput
+              pickerProps={{
+                size: "middle",
+                open: false,
+                onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setIsEstimateTimeOpen(true);
+                },
+              }}
+              formItemProps={{ name: "pickupTime" }}
+            />
+          </div>
+        )}
       </ProInputCard>
       {isDesktop ? (
         <Dialog
           isOpen={isEstimateTimeOpen}
           onClose={handleEstimateTimeClose}
-          initialDate={estimateTimeDate}
           onSave={handleEstimateTimeSave}
         />
       ) : (
         <BottomSheet
           isOpen={isEstimateTimeOpen}
           onClose={handleEstimateTimeClose}
-          initialDate={estimateTimeDate}
           onSave={handleEstimateTimeSave}
         />
       )}