121 lines
3.7 KiB
TypeScript
121 lines
3.7 KiB
TypeScript
import { Form } from "antd";
|
|
import useFormInstance from "antd/es/form/hooks/useFormInstance";
|
|
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
|
|
import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups.tsx";
|
|
import dayjs from "dayjs";
|
|
import {
|
|
updatePickupDate,
|
|
updatePickupTime,
|
|
updatePickUpType,
|
|
} from "features/order/orderSlice";
|
|
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 } from "redux/hooks";
|
|
import { SERVER_DATE_FORMAT, UI_TIME_FORMAT } from "utils/constants.ts";
|
|
|
|
export default function TimeEstimateCard() {
|
|
const dispatch = useAppDispatch();
|
|
const { t } = useTranslation();
|
|
const form = useFormInstance();
|
|
const { isDesktop } = useBreakPoint();
|
|
const [estimateWay, setEstimateWay] = useState("now");
|
|
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);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<ProInputCard title={t("cart.estimateTime")}>
|
|
<Form.Item
|
|
name="estimateWay"
|
|
required
|
|
rules={[
|
|
{ required: true, message: t("cart.pleaseSelectEstimateTime") },
|
|
]}
|
|
>
|
|
<ProRatioGroups
|
|
options={[
|
|
{ label: t("cart.now"), value: "now", price: "" },
|
|
{ label: t("cart.later"), value: "later", price: "" },
|
|
]}
|
|
value={estimateWay}
|
|
onRatioClick={(value) => {
|
|
if (value === "now") {
|
|
setEstimateWay(value);
|
|
handleEstimateTimeSave(
|
|
dayjs().format(SERVER_DATE_FORMAT),
|
|
dayjs().format(UI_TIME_FORMAT),
|
|
);
|
|
dispatch(updatePickUpType("now"));
|
|
} else {
|
|
setEstimateWay(value);
|
|
setIsEstimateTimeOpen(true);
|
|
dispatch(updatePickUpType(""));
|
|
}
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
{/* {estimateWay === "later" && (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
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}
|
|
onSave={handleEstimateTimeSave}
|
|
/>
|
|
) : (
|
|
<BottomSheet
|
|
isOpen={isEstimateTimeOpen}
|
|
onClose={handleEstimateTimeClose}
|
|
onSave={handleEstimateTimeSave}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|