pickup time: intial commit

2026-01-06 22:41:50 +03:00
parent ad036d1e64
commit ebe9928091
9 changed files with 553 additions and 6 deletions
--- a/src/pages/checkout/components/pickupEstimate/TimeEstimateCard.tsx
+++ b/src/pages/checkout/components/pickupEstimate/TimeEstimateCard.tsx
@@ -0,0 +1,106 @@
+import useFormInstance from "antd/es/form/hooks/useFormInstance";
+import TimeIcon from "components/Icons/order/TimeIcon";
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import ProText from "components/ProText";
+import {
+  selectCart,
+  updatePickupDate,
+  updatePickupTime,
+} from "features/order/orderSlice";
+import useBreakPoint from "hooks/useBreakPoint.ts";
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { PickupEstimateDialog } from "./Dialog";
+import { PickupEstimateBottomSheet } from "./BottomSheet";
+
+export default function PickupTimeCard() {
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+  const form = useFormInstance();
+  const { isDesktop } = useBreakPoint();
+  const { pickupTime, pickupDate } = useAppSelector(selectCart);
+  const [isEstimateTimeOpen, setIsEstimateTimeOpen] = useState(false);
+
+  const handleEstimateTimeSave = (date: string, time: string) => {
+    form.setFieldsValue({ pickupTime: time, pickupDate: date });
+    dispatch(updatePickupTime(time));
+    dispatch(updatePickupDate(date));
+  };
+
+  const handleEstimateTimeClose = () => {
+    setIsEstimateTimeOpen(false);
+  };
+
+  useEffect(() => {
+    form.setFieldsValue({ pickupTime, pickupDate });
+  }, [pickupTime, pickupDate]);
+
+  return (
+    <>
+      <ProInputCard
+        title={t("checkout.pickup")}
+        titleRight={
+          <ProText
+            onClick={() => setIsEstimateTimeOpen(true)}
+            style={{
+              fontWeight: 500,
+              fontStyle: "Medium",
+              fontSize: 14,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+              color: "#FFB700",
+              cursor: "pointer",
+            }}
+          >
+            {t("checkout.change")}
+          </ProText>
+        }
+      >
+        <span style={{ position: "relative", top: 3 }}>
+          <TimeIcon color="#777580" />
+        </span>
+        <ProText
+          style={{
+            fontWeight: 400,
+            fontStyle: "Regular",
+            fontSize: 16,
+            lineHeight: "140%",
+            letterSpacing: "0%",
+            color: "#777580",
+            padding: "0 2px 0 4px",
+          }}
+        >
+          {pickupTime}
+        </ProText>
+        <ProText
+          style={{
+            fontWeight: 400,
+            fontStyle: "Regular",
+            fontSize: 16,
+            lineHeight: "140%",
+            letterSpacing: "0%",
+            color: "#777580",
+            padding: "0 2px",
+          }}
+        >
+          (Est. 10-15 minutes)
+        </ProText>
+      </ProInputCard>
+
+      {isDesktop ? (
+        <PickupEstimateDialog
+          isOpen={isEstimateTimeOpen}
+          onClose={handleEstimateTimeClose}
+          onSave={handleEstimateTimeSave}
+        />
+      ) : (
+        <PickupEstimateBottomSheet
+          isOpen={isEstimateTimeOpen}
+          onClose={handleEstimateTimeClose}
+          onSave={handleEstimateTimeSave}
+        />
+      )}
+    </>
+  );
+}