50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import { Button } from "antd";
|
|
import { useCallback, useMemo } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import styles from "../../address/address.module.css";
|
|
import useOrder from "../hooks/useOrder";
|
|
|
|
export default function CheckoutButton() {
|
|
const { t } = useTranslation();
|
|
const orderType = useMemo(() => localStorage.getItem("orderType"), []);
|
|
const navigate = useNavigate();
|
|
const { handleCreateOrder } = useOrder();
|
|
const { id } = useParams();
|
|
|
|
const handleSplitBillClick = useCallback(() => {
|
|
navigate(`/${id}/split-bill`);
|
|
}, [navigate, id]);
|
|
|
|
const handlePlaceOrderClick = useCallback(() => {
|
|
handleCreateOrder();
|
|
}, [handleCreateOrder]);
|
|
|
|
const shouldShowSplitBill = useMemo(
|
|
() => orderType === "dine-in",
|
|
[orderType]
|
|
);
|
|
|
|
return (
|
|
<div className={styles.checkoutButtonContainer}>
|
|
{shouldShowSplitBill && (
|
|
<Button
|
|
className={styles.splitBillButton}
|
|
onClick={handleSplitBillClick}
|
|
>
|
|
{t("checkout.splitBill")}
|
|
</Button>
|
|
)}
|
|
|
|
<Button
|
|
type="primary"
|
|
shape="round"
|
|
className={styles.placeOrderButton}
|
|
onClick={handlePlaceOrderClick}
|
|
>
|
|
{t("checkout.placeOrder")}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|