Initial commit

src/pages/checkout/components/CheckoutButton.tsx

@@ -0,0 +1,49 @@
+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>
+  );
+}