109 lines
3.4 KiB
TypeScript
109 lines
3.4 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
|
|
import { useAppSelector } from "redux/hooks.ts";
|
|
import ProText from "components/ProText.tsx";
|
|
import { OrderType } from "pages/checkout/hooks/types.ts";
|
|
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
|
|
import { Segmented, Button } from "antd";
|
|
|
|
import DineInIcon from "./icons/dineIn.svg?react";
|
|
import DeliveryIcon from "./icons/delivery.svg?react";
|
|
import PickupIcon from "./icons/pickup.svg?react";
|
|
import styles from "./OrderDetailsBottomSheet.module.css";
|
|
import { GoogleMap } from "components/CustomBottomSheet/GoogleMap.tsx";
|
|
|
|
interface OrderDetailsBottomSheetProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function OrderDetailsBottomSheet({
|
|
isOpen,
|
|
onClose,
|
|
}: OrderDetailsBottomSheetProps) {
|
|
const { t } = useTranslation();
|
|
const { orderType, location } = useAppSelector((state) => state.order);
|
|
|
|
return (
|
|
<ProBottomSheet
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
title={t("orderDetails.title")}
|
|
height={500}
|
|
snapPoints={["60vh"]}
|
|
showCloseButton={false}
|
|
>
|
|
<div style={{ padding: "16px 0", position: "relative" }}>
|
|
{/* Order Type */}
|
|
<ProInputCard
|
|
title={t("orderDetails.fulfillmentType")}
|
|
dividerStyle={{ margin: "5px 0 0 0" }}
|
|
>
|
|
<Segmented
|
|
options={[
|
|
{
|
|
value: OrderType.DineIn,
|
|
label: t("orderTypes.dine-in"),
|
|
icon: <DineInIcon />,
|
|
},
|
|
{
|
|
value: OrderType.Pickup,
|
|
label: t("orderTypes.pickup"),
|
|
icon: <PickupIcon />,
|
|
},
|
|
{
|
|
value: OrderType.Delivery,
|
|
label: t("orderTypes.delivery"),
|
|
icon: <DeliveryIcon />,
|
|
},
|
|
]}
|
|
value={orderType}
|
|
size="small"
|
|
/>
|
|
</ProInputCard>
|
|
<ProInputCard
|
|
title={t("orderDetails.location")}
|
|
dividerStyle={{ margin: "5px 0 0 0" }}
|
|
>
|
|
{!location ? (
|
|
<div className={styles.noLocationContainer}>
|
|
<ProText type="secondary">
|
|
{t("address.noLocationSelected")}
|
|
</ProText>
|
|
<br />
|
|
<ProText type="secondary" className={styles.smallTextStyle}>
|
|
{t("address.clickEditToSelect")}
|
|
</ProText>
|
|
</div>
|
|
) : (
|
|
<div className={styles.mapContainer}>
|
|
<GoogleMap
|
|
readOnly={true}
|
|
initialLocation={location}
|
|
height="160px"
|
|
/>
|
|
</div>
|
|
)}
|
|
</ProInputCard>
|
|
<ProInputCard
|
|
title={t("orderDetails.pickupTime")}
|
|
dividerStyle={{ margin: "5px 0 0 0" }}
|
|
>
|
|
<div className={styles.noLocationContainer}>
|
|
<ProText type="secondary">
|
|
{t("address.noLocationSelected")}
|
|
</ProText>
|
|
<br />
|
|
<ProText type="secondary" className={styles.smallTextStyle}>
|
|
{t("address.clickEditToSelect")}
|
|
</ProText>
|
|
</div>
|
|
</ProInputCard>
|
|
<Button type="primary" className={styles.saveButton}>
|
|
{t("orderDetails.save")}
|
|
</Button>
|
|
</div>
|
|
</ProBottomSheet>
|
|
);
|
|
}
|