107 lines
3.0 KiB
TypeScript
107 lines
3.0 KiB
TypeScript
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}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|